Angular 6嵌套子级路由未渲染视图

Question

我被困在导航可用的地方，但是视图基本上不起作用，一个组件映射到了两条不同的路线：

组件是 example.component.ts

路线是

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

http://localhost:4200/nav/valuation

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

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

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 时，将保留相同的视图它不是加载视图而是路由更改

您可以看到前两幅图像以查看布线，后两幅图像以右视图

Answer 1

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

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

] }

您需要做的是通过向路由添加 pathMatch 属性，将匹配策略更改为完整：

{ 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