Angular 多个路由器模块不工作

Question

我希望在我的主应用程序中有一个路由模块，并在单独的模块中包含路由，例如：

\n\n

app\n - modules\n   -my-module\n      my-routing.module.ts\n app-routing.module.ts\n

\n\n

主要路由模块有：

\n\n

const routes: Routes = [\n  { path: \'\', pathMatch: \'full\', redirectTo: \'view-container\' },\n  { path: \'view-container\', component: ViewContainerComponent },\n  { path: \xc2\xa0\'**\', component: ViewContainerComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes, { enableTracing: true })],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n

\n\n

子模块的路由是：

\n\n

const routes: Routes = [\n  { path: \'view-detail\', component: CompADetailComponent }\n];\n\n@NgModule({\n  imports: [\n    CommonModule,\n    RouterModule.forChild(routes)\n  ],\n  declarations: []\n})\nexport class MyRoutingModule { }\n

\n\n

我的 ViewContainer 组件有一个指向“查看详细信息”的 routerLink。

\n\n

<a [routerLink]="[\'/view-detail\']">\n  View Details\n</a>\n

\n\n

但是，当我单击“查看详细信息”链接时，仅 URL 发生变化，CompADetailComponent 未加载。

\n\n

我确实注意到，如果我将“查看详细信息”路径移动到主应用程序路由模块，它就可以正常工作。在跟踪中，我看到的差异是：

\n\n

当它起作用时：

\n\n

Router Event: NavigationStart\nplatform-browser.js:367 NavigationStart(id: 2, url: \'/view-detail\')\nplatform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}\nplatform-browser.js:380 Router Event: RoutesRecognized\nplatform-browser.js:367 RoutesRecognized(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'view-detail\') } )\nplatform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: GuardsCheckStart\nplatform-browser.js:367 GuardsCheckStart(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'view-detail\') } )\nplatform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ChildActivationStart\nplatform-browser.js:367 ChildActivationStart(path: \'\')\nplatform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: ActivationStart\nplatform-browser.js:367 ActivationStart(path: \'view-detail\')\nplatform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: GuardsCheckEnd\nplatform-browser.js:367 GuardsCheckEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'view-detail\') } , shouldActivate: true)\nplatform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}\nplatform-browser.js:380 Router Event: ResolveStart\nplatform-browser.js:367 ResolveStart(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'view-detail\') } )\nplatform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ResolveEnd\nplatform-browser.js:367 ResolveEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'view-detail\') } )\nplatform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ActivationEnd\nplatform-browser.js:367 ActivationEnd(path: \'view-detail\')\nplatform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: ChildActivationEnd\nplatform-browser.js:367 ChildActivationEnd(path: \'\')\nplatform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: NavigationEnd\nplatform-browser.js:367 NavigationEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\')\nplatform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}\n

\n\n

当它不起作用时：

\n\n

Router Event: NavigationStart\nplatform-browser.js:367 NavigationStart(id: 2, url: \'/view-detail\')\nplatform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}\nplatform-browser.js:380 Router Event: RoutesRecognized\nplatform-browser.js:367 RoutesRecognized(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'**\') } )\nplatform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: GuardsCheckStart\nplatform-browser.js:367 GuardsCheckStart(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'**\') } )\nplatform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ChildActivationStart\nplatform-browser.js:367 ChildActivationStart(path: \'\')\nplatform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: ActivationStart\nplatform-browser.js:367 ActivationStart(path: \'**\')\nplatform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: GuardsCheckEnd\nplatform-browser.js:367 GuardsCheckEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'**\') } , shouldActivate: true)\nplatform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}\nplatform-browser.js:380 Router Event: ResolveStart\nplatform-browser.js:367 ResolveStart(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'**\') } )\nplatform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ResolveEnd\nplatform-browser.js:367 ResolveEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\', state: Route(url:\'\', path:\'\') { Route(url:\'view-detail\', path:\'**\') } )\nplatform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}\nplatform-browser.js:380 Router Event: ActivationEnd\nplatform-browser.js:367 ActivationEnd(path: \'**\')\nplatform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: ChildActivationEnd\nplatform-browser.js:367 ChildActivationEnd(path: \'\')\nplatform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}\nplatform-browser.js:380 Router Event: NavigationEnd\nplatform-browser.js:367 NavigationEnd(id: 2, url: \'/view-detail\', urlAfterRedirects: \'/view-detail\')\nplatform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}\n

\n\n

所以它似乎选择了“**”路径而不是“查看详细信息”路径。知道我做错了什么吗？

\n\n

* 编辑 * \n添加应用程序模块：

\n\n

import { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\nimport { AppComponent } from \'./app.component\';\nimport { AppRoutingModule } from \'./app-routing.module\';\nimport { CompAModule } from \'./modules/comp-a/comp-a.module\';\nimport { ViewContainerComponent } from \'./view-container/view-container.component\';\nimport { CompADetailComponent } from \'./modules/comp-a-detail/comp-a-detail.component\';\nimport { MyRoutingModule } from \'./modules/my-module/my-routing.module\';\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ViewContainerComponent,\n    CompADetailComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    MyRoutingModule,\n    CompAModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

\n

Answer 1

这里的导入数组：

  imports: [
    BrowserModule,
    AppRoutingModule,
    MyRoutingModule,
    CompAModule
  ],

定义路线的顺序。正如您在此处所看到的那样，Angular 会按以下顺序将您的路线合并在一起。

  { path: '', pathMatch: 'full', redirectTo: 'view-container' },
  { path: 'view-container', component: ViewContainerComponent },
  { path:  '**', component: ViewContainerComponent }
  { path: 'view-detail', component: CompADetailComponent }

由于 Angular 处理路由“第一个匹配获胜”...它总是会在“查看详细信息”路由之前找到“**”路由。

您只需交换导入数组中的顺序：

  imports: [
    BrowserModule,
    MyRoutingModule,
    CompAModule,
    AppRoutingModule
  ],

我有一篇博客文章，详细介绍了路由排序规则的详细信息（和例外情况）：https: //blogs.msmvps.com/deborahk/angular-route-ordering/