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

Question

我有一个基于 Angular 5 和 Contentful 构建的应用程序。服务以 JSON 形式从 Contentful 检索路由的 Entry，并且必须将这些路由提供给延迟加载的子路由模块。显然，路由需要在子路由模块内动态设置，因为应该可以随时从 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);
        });
    });
  }

}

我遇到了一些问题:

1. 如果我像最后那样重置路由器的配置，全局路由将被重置，而不仅仅是子路由模块 NewsRoutingModule 中分配的路由。
2. 我尝试为 Contentful 的每个新路由分配的 NewsArticleComponent 无法识别。尽管事实上它是 @NgModule 声明的一部分。

Answer 1

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

假设您有一个具有以下主要路线的网站；

/家 /主页/新闻 /首页/新闻/文章1 /首页/新闻/文章2`

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

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

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

在 NewsArticleComponent 的 ngOnInit 中，您可以获取新文章 id，并从 contentful 中检索 Entry。您可能还想研究一下Route Resolvers，您可以在加载新闻组件之前从 Contentful 检索数据

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

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