Angular9 嵌套路由

2020-07-06 16:58 更新

随着你的应用变得越来越复杂,你可能要创建一些根组件之外的相对路由。这些嵌套路由类型称为子路由。这意味着你要为你的应用添加第二 <router-outlet>,因为它是 AppComponent 之外的另一个 <router-outlet>

在这个例子中,还有两个子组件,child-achild-b。这里的 FirstComponent 有它自己的 <nav>AppComponent 之外的第二 <router-outlet>

//In the template


<h2>First Component</h2>


<nav>
  <ul>
    <li><a routerLink="child-a">Child A</a></li>
    <li><a routerLink="child-b">Child B</a></li>
  </ul>
</nav>


<router-outlet></router-outlet>

子路由和其它路由一样,同时需要 pathcomponent。唯一的区别是你要把子路由放在父路由的 children 数组中。

//AppRoutingModule (excerpt)


const routes: Routes = [
  { path: 'first-component',
    component: FirstComponent, // this is the component with the <router-outlet> in the template
    children: [
      {
        path: 'child-a', // child route path
        component: ChildAComponent // child route component that the router renders
      },
      {
        path: 'child-b',
        component: ChildBComponent // another child route component that the router renders
      }
    ] },
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号