Angular: 子路由器模块内路由的动态设置，即延迟加载

Question

我有一个基于 Angular 5 和 Contentful 构建的应用程序。服务从 Contentful 检索 Entry 路由作为 JSON，并且必须将这些路由提供给延迟加载的子路由模块。显然，路由需要在子路由模块中动态设置，因为应该可以随时从 Contentful 更新它们的值。

子路由器模块 NewsRoutingModule 如下所示：

const newsRoutes: Routes = [
  { path: '', component: NewsComponent },
  { path: '**', component: 404Component }
];

@NgModule({
  imports: [
    RouterModule.forChild(newsRoutes),
    ...
  ],
  declarations: [
    NewsComponent,
    NewsArticleComponent,
    NewsCardComponent
  ],
  ...
})

export class NewsRoutingModule {

  constructor(
    private router: Router,
    private languageService: LanguageService,
    private contentfulService: ContentfulService
  ) {
    this.loadRoutes();
  }

  loadRoutes() {

    // Language Service is used to detect the locale. Contentful Service is used to pull content from Contentful.
    this.languageService.events$.subscribe(locale => {
      this.contentfulService
        .getSearchResults('newsArticle', '', locale)
        .then(response => {

          // Content from Contentful returned as a response containing an array of Entry objects.
          response.items.forEach((entry: Entry<any>) => {
            let entryRoute = entry.fields.route;
            let hasRoute = false;

            // Check that the route doesn't already exist before adding it.
            newsRoutes.forEach((angularRoute) => {
              if (angularRoute.path == entryRoute) {
                hasRoute = true;
              }
            });
            if (!hasRoute) {
              newsRoutes.push({path: entryRoute, component: NewsArticleComponent});
            }
          });

          // Reset router's config at the end.
          this.router.resetConfig(newsRoutes);
        });
    });
  }

}

我遇到了一些问题：

如果我重置路由器的配置，就像我最后所做的那样，全局路由会被重置，而不仅仅是子路由模块中分配的路由，NewsRoutingModule.
无法识别我试图为来自 Contentful 的每条新路线分配的 NewsArticleComponent。尽管事实上它是 @NgModule.

Answer 1

我明白你想做什么，但在这种情况下应该应用不同的过程

假设您的站点具有以下主要路线；

/home /home/news /home/news/article1 /home/news/article2`

home和home/news将是您的RouterModule.forRoot路线

如果文章路由被激活，/home/news/article1，这应该加载你的 NewsArticleComponent - 你需要的是 Angular Route Parameters

{ path: '/home/news/:id', component: NewsArticleComponent }

在 NewsArticleComponent 的 ngOnInit 中你可以得到新的文章 id，并从 contentful 中检索条目。您可能还想查看 Route Resolvers，在那里您可以在加载新闻组件之前从 Contentful 检索数据

您将需要找到路由参数示例以及路由解析器。之后，它应该很简单

注意：我不确定您为什么延迟加载新文章组件。您通常只延迟加载不太可能经常使用的模块，但在这种情况下它是您应用程序的主要组件

Angular: 子路由器模块内路由的动态设置，即延迟加载

Angular: Dynamic Setting of Routes inside a Child Router Module, that is lazily-loaded

rxjs

angular-routing

contentful

angular