Angular 6嵌套子路由不渲染视图答案

【问题标题】：Angular 6 nested children routing not rendering viewAngular 6嵌套子路由不渲染视图
【发布时间】：2019-04-25 17:35:02
【问题描述】：

我被困在导航工作的地方，但视图无法正常工作，基本上一个组件映射到两条不同的路线：

组件是example.component.ts

路线是

http://localhost:4200/manager/nav/example

http://localhost:4200/nav/valuation

有两个不同的模块并定义了自己的路由

导航机制：当用户点击 manager 时，它会加载自己的组件，然后用户可以导航到 manager>nav 并且从导航用户可以导航到 manager>nav>示例

manager.routing.ts

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

] }

http://localhost:4200/manager/nav

http://localhost:4200/manager/nav/example

路线已更改，但视图基本不会呈现在管理器视图而不是示例视图上

但是当我使用路由导航而不是点击示例时，它会加载原始页面并且导航有自己的模块和路由

nav.routing.ts

  { path: 'nav', component: NavComponent, children: [
  { path: '', component: PropertyComponent},
  { path: 'example, ', component:ExampleComponent}
 ]

显示正确的视图

当我使用路线 http://localhost:4200/manager/nav/example 直到 http://localhost:4200/manager/nav 时，视图会发生变化，当我导航到 http://localhost:4200/manager/nav/example 时，相同的视图仍然没有加载视图但路线改变

你可以看到前两个图像来查看路由，最后两个图像是右视图

【问题讨论】：

我的建议是使用延迟加载，下面的链接可能会给你答案：stackoverflow.com/questions/49621578/…。我在与您类似的大型电子商务应用程序中使用这种延迟加载。查看我的资料。祝您找到问题的解决方案。

标签： angular angular-routing angular-guards

【解决方案1】：

我相信你的问题是你使用 Angular 的默认路径匹配策略，即 prefix。这意味着 Angular 将使用它在你的路由模块中找到的第一条路由，该路由从你的路由的指定段开始。空路径是一种特殊情况，因为所有路径都以空路径开头。所以在这个例子中 nav 和 example 都以空路径开始，Angular 将导航到与空路径关联的组件，即 PortfolioManagerComponent。

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

您需要做的是通过将 pathMatch 属性添加到您的路线，将您的匹配策略更改为 full：

{ path: 'manager', component: ManagerComponent , children:[
    { path: '', pathMatch: 'full', component: PortfolioManagerComponent },
    { path: 'nav', component: NavComponent},children: [
    { path: 'example', component: component:ExampleComponent}

    ] }

文档中的更多信息：https://angular.io/api/router/Routes#matching-strategy

【讨论】：