如何在角度路由模塊中設置動態數據

Question

我的角度應用程序面臨以下情況。

使得從一個配置我已經設計的角應用程序，使用運行時配置config.json文件使用的應用程序的自舉前讀取APP_INITIALIZER在提供商AppModule 。 來自配置文件的數據通過AppConfigService服務作為AppConfiguration對象提供。 這按預期工作。

問題出現是因為我希望AppRoutingModule路由data的role屬性是可配置的，並且該值必須由包含我的配置的AppConfigService提供。

這就是我處理這種情況的方式：

在AppModule類中，我以這種方式初始化應用程序：

app.module.ts

 @NgModule({ declarations: [ ... ], imports: [ ... ], entryComponents: [ ... ], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], providers: [ { provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [AppConfigService, KeycloakService], }, ... ], bootstrap: [AppComponent] }) export class AppModule { }

在初始化函數中，我調用AppConfigService::loadConfig方法，該方法從config.json文件中讀取數據並填充AppConfiguration對象。

app-init.ts

 export function initializer(configService: AppConfigService, keycloak: KeycloakService): () => Promise<boolean> { return () => { // Load configuration from config.json file return configService.loadConfig() .then((): Promise<boolean> => { // Initialize keycloak ... }); }; }

app-config.service.ts

 @Injectable({ providedIn: 'root' }) export class AppConfigService { private _configuration: AppConfiguration; public get configuration() { return this._configuration; } constructor(private httpClient: HttpClient) { } public async loadConfig() { try { const data: AppConfiguration = await this.httpClient .get<AppConfiguration>(AppSettings.CONFIG_JSON_FILE) .toPromise(); this._configuration = data; } catch (err) { console.error(err.error); } } }

在我的AppRoutingModule ，我試圖從配置中設置routes的role值： data: { roles: [this.configuration.role] } 。

app-routing.module.ts

 const routes: Routes = [ ... { path: 'openOrders', component: OpenOrderListComponent, canActivate: [AuthGuardService], data: { roles: [this.configuration.role] } }, ... ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [AuthGuardService, AppConfigService] }) export class AppRoutingModule { private configuration: AppConfiguration; constructor(configService: AppConfigService) { this.configuration = configService.configuration; } }

不幸的是，我從構建過程中得到這個錯誤：

app/app-routing.module.ts(27,7) 中的錯誤：“AppRoutingModule”模板編譯期間出錯裝飾器不支持對本地（非導出）符號的引用，但引用了“路由”
考慮導出“路線”。

我怎樣才能克服這個問題？ 我想這是一個天真的問題，但我不知道如何解決這個錯誤（記住我是 angular 的新手）。

提前謝謝了。

PS：我使用的是角度版本：

角 CLI：7.0.7
節點：12.21.0
操作系統：Linux x64
角度：7.0.0

Answer 1

最后我采用了不同的方法。 我沒有在數據屬性中注入可配置值，而是在使用該數據值的代碼中注入了該值。

因此，我從路由中刪除了 data 屬性：

 const routes: Routes = [ ... { path: 'openOrders', component: OpenOrderListComponent, canActivate: [AuthGuardService] }, ... ];

角色數據在 AuthGuardService 中使用。 我所要做的就是在這個類中注入 AppConfigService 並使用 AppConfiguration 中的角色值而不是路由數據中的值：

 @Injectable() export class AuthGuardService extends KeycloakAuthGuard { configuration: AppConfiguration; ... constructor(protected router: Router, protected keycloakAngular: KeycloakService, protected configService: AppConfigService) { super(router, keycloakAngular); this.configuration = configService.configuration; } isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> { ... const requiredRoles: string[] = [this.configuration.role]; ... }