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

Question

我有一个基于Angular 5和Contentful构建的应用程序。服务以 JSON 形式从内容中检索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

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

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

/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，并从内容中检索条目。您可能还想查看 Route Resolvers ，您可以在加载新闻组件之前从 Contentful 检索数据

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

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