Angular 在初始化之前从 REST 服务加载路由

Question

我正在研究 Angular 8 从 REST 服务动态创建路由的可能性。这个想法是用户可以创建页面，这些页面应该可以通过网页上的路由访问。

我看到了动态添加路由的选项，但是我希望在应用程序的其余部分之前加载路由，以便用户访问时：'website/generatedPage' 路由在应用程序完全加载之前就位。

在应用继续使用路由选项之前，如何确保来自 REST 服务的路由就位？

下面的一段代码将路由添加到后期：

constructor( private sitemapService: SitemapService, private router: Router ) { this.sitemapService.getSiteMap().then(result => { result.forEach(sitemapItem => { this.router.config.push({ path: sitemapItem.pageName, component: PageComponent }); }); }); }

使用此代码，您可以在应用程序加载完成后导航到该页面，但是，当您直接请求路由时，它尚未加载。

提前致谢！

Answer 1

我找到了解决方案，但它更像是一种解决方法。对于我的情况，它有效，但如果有人有更清洁的解决方案，我们将不胜感激。

在 appModule 中，我为所有预定义路由定义了路由。我有一个网站模块，其中将初始化用户创建的所有页面。

所以解决方法：

在应用程序路由中，我将所有未定义的路由发送到网站模块：

{ path: '**', loadChildren: () => import('./website/website.module').then(module => module.WebsiteModule) }

在网站模块中，我将所有调用转发给 PageComponent

path: '**', component: PageComponent

在页面组件中，我从其他服务请求页面，如果是 404，我将重定向到预定义的 PageNotFound。

正如我所说，它绝对不干净但它确实有效。因此，任何能让我创建一个完全由 rest 定义的 RoutingConfig 的干净解决方案将不胜感激。

Answer 2

好的，所以我遇到了完全相同的问题，当我偶然发现这三篇文章并结合使用它们来提出解决方案时，我实际上打算使用您的 "solution"。

参考文献：

https://long2know.com/2017/11/angular-dynamic-routes-and-application-initialization/ https://medium.com/codegg/pre-loading-user-specific-routes-in-angular-ce829430e1cb https://www.tektutorialshub.com/angular/angular-how-to-use-app-initializer/#where-to-use-app-initializer

我的用例：我需要根据 GET 响应创建路由

这对我有用：

1.首先，我创建了一个新的 app-init 服务：


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

@Injectable()
export class AppInitService {

  constructor(private Router: Router) {}

  init() {
    return new Promise<void>((resolve, reject) => {

        // Simple example from an array. In reality, I used the response of
        // a GET. Important thing is that the app will wait for this promise to resolve
        const newDynamicRoutes = ['bulbasaur','charmander','squirtle']
        const routes = this.Router.config;

        newDynamicRoutes.forEach(routeName => {
          routes.push({ path: routeName, component: <YourComponent> });
        });

        this.Router.resetConfig(routes);
        resolve();
    });
  }
}

2。然后，我在 app.module.ts 和 APP_INITIALIZER

中使用它

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './services/app-init/app-init.service'; // New service that I created

...

export function initializeApp(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.init();
  }
}

...

  providers: [
    AppInitService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [AppInitService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这很有魅力。它让我可以根据 API.

的响应创建路由

Angular 在初始化之前从 REST 服务加载路由

Angular load routing from REST service before initialization

rest

routing

routeconfig

angular