如何在加載視圖之前將全域組態檔加載到Angular組件

我有一個全域組態檔，如下所示：

{
  "options": {
    "pages": 5,
    "paginator": true,
    "rows": [
      "5",
      "10",
      "15",
      "20",
      "25",
      "30",
      "40",
      "50",
      "100"
    ],
    "perPage": 10,
    "sorting": true,
    "selection": true
  }
}

我通過以下服務呼叫此檔案ngOnit()：

  ngOnInit() {
     this.getGlobalSettings();
  }

  getGlobalSettings(){
    const providerSubscription = this.leaveApplicationService.getGlobalSettings().subscribe(res => {
      this.pageSettings = res;
      },
      error => {
        console.log(error);
      },
      () => {
      });
   this.subscriptionCollection.add(providerSubscription);
  }

我在 HTML 檔案中使用這些設定，但似乎只有在視圖初始化后才加載配置。因此，當我嘗試pageSettings.options在視圖中訪問時會引發錯誤。

如何解決這個問題并在應用程式初始化后立即加載設定，以便它可用于所有組件？

uj5u.com熱心網友回復：

如果您的組態檔嵌入在您的應用程式中，您可以將組態檔匯出為 Injectable

在 app.conf.ts

import { Injectable } from '@angular/core';

@Injectable()
export class APPCONFIG {
  "options" = {
    "pages": 5,
    "paginator": true,
    "rows": [
      "5",
      "10",
      "15",
      "20",
      "25",
      "30",
      "40",
      "50",
      "100"
    ],
    "perPage": 10,
    "sorting": true,
    "selection": true
  }
}

并將其直接匯入您的服務/組件中

import { APPCONFIG } from 'src/app/app.conf';

 constructor(private appConf: APPCONFIG) {
     console.log(this.appConf.options);
 }

就像 APPCONFIG 是可注入的，不要忘記在您的應用程式或組件中將其宣告為提供程式

providers: [
  APPCONFIG
] 

uj5u.com熱心網友回復：

如果組件是基于路由加載的，你可以查看下面的文章

https://javascript.plainenglish.io/angular-resolver-for-prefetching-data-angular-guards-resolve-40fda257d666

uj5u.com熱心網友回復：

很可能您想在 HTML 中使用異步管道 - 這可確保您的 HTML 在您的資料可用時立即顯示。

TS 代碼：

pageSettings$: Observable<Settings>;

constructor(private leaveApplicationService: LeaveApplicationService){}

ngOnInit() {
  this.pageSettings$ = this.leaveApplicationService.getGlobalSettings();
}

HTML：

<div *ngIf="pageSettings$ | async as pageSettings">
  Use your Data inside this DIV{{ pageSettings.x }}
</div>

如果需要，您還可以使用 div 代替 div 來避免嵌套更深。

uj5u.com熱心網友回復：

// You can use canActive  for loading all your require things, it will call your service method and then load main app component, So this way your assest will be aviable before thay use in any component.

// Like i have Dashboard screen this is how i will use (in my case,i am checking user from server and checking token). i have AuthorizationGuard for this,  



{ path: 'dashboard/trips', component: TripsComponent, canActivate: [AuthorizationGuard] },

// AuthorizationGuard  in my case here is how i am checking my user details through server api.


@Injectable({
    providedIn: 'root'
  })
export class AuthorizationGuard implements CanActivate {
    constructor(
        private authService: AuthService,
    ) {
    }
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot) {
        // i am checking user token 
        return this.authService.VerifyTokenWithNgrx()
            .pipe(
                map((data) => {
                    if (data.user != null) {
                    // saving user data. in your case you can impliment your logic here which you have shared in question.
                      this.authService.sendUserData(data.user);
                        moment.tz.setDefault(data.user.timeZone);
                        return true;
                    } else {
                        return false;
                    }
                }),
                catchError(() => {
                    return of(false);
                })
            );
    }
}

// after this your main component will load on screen and things will be available. 

標籤：

上一篇：GitHub-檢測到大檔案-無法推送

下一篇：如何從基于id的服務中獲取資料？