0

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

组件是example.component.ts

路线是

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

http://localhost:4200/nav/valuation

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

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

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 问题视图不变

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

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

导航路由.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/例如，相同的视图仍然存在，它没有加载视图但路由更改

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

4

1 回答 1

0

我相信您的问题是您使用 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属性添加到您的路线来将匹配策略更改为完整：

{ 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

于 2018-11-23T12:55:32.090 回答