角度的父子路由答案

【问题标题】：parent-child routing in angular角度的父子路由
【发布时间】：2018-01-23 07:25:22
【问题描述】：

当我以 Angular 执行路由时，出现类似 Error: Cannot match any routes. URL Segment: 'example2/child1'here 的错误，我在 app.module.ts 中定义路由

{ path:"for", component: ForComponent },
      { path:"example1", component: Example1Component },
      { path:"example2",component: Example2Component ,
          children: [          
          { path:"child1",component:Child1Component },
          { path:"child2",component:Child2Component },
          { path:"child3",component:Child3Component }
          ]
      }

在我的父组件中，我设置了动态链接来导航子组件

<ul>
     <li *ngFor="let item of coutry">
         <a href="" routerLink="{{item.name}}" >{{item.name}}</a>
     </li>
</ul>

那我该怎么办？另外，在 StackOverflow 中看到同样的问题，但没用click here

【问题讨论】：

标签： angular routing angular-routing

【解决方案1】：

当您的children 数组中没有india 作为路径时，它如何匹配india。你需要那个，或者像path:":country"这样的参数路径：

所以解决方案1：

{ path:"example2",component: Example2Component ,
  children: [          
    { path:"india",component:Child1Component },
    // ...
  ]
}

或带参数路径：

{ path:"example2",component: Example2Component ,
  children: [          
    { path:":country",component:Child1Component },
    // ...
  ]
}

【讨论】：

在第二个解决方案中还有一件事，你在参数名称之前写: 这到底是什么意思？
它工作得很好，但是有了这个，我想执行一个任务，比如点击它导航到另一个页面并显示详细信息的特定链接，但现在它在同一页面上打开。请帮助

【解决方案2】：

你还没有在'example2'的孩子上输入路径解析：

{ path:"for", component: ForComponent },
      { path:"example1", component: Example1Component },
      { path:"example2",component: Example2Component ,
          children: [          
          { path:"india",component:Child1Component },
          { path:"child2",component:Child2Component },
          { path:"child3",component:Child3Component }
          ]
      }

【讨论】：