Angular9 嵌套路由

隨著你的應(yīng)用變得越來(lái)越復(fù)雜，你可能要?jiǎng)?chuàng)建一些根組件之外的相對(duì)路由。這些嵌套路由類型稱為子路由。這意味著你要為你的應(yīng)用添加第二 <router-outlet>，因?yàn)樗?AppComponent 之外的另一個(gè) <router-outlet>。

在這個(gè)例子中，還有兩個(gè)子組件，child-a 和 child-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>

子路由和其它路由一樣，同時(shí)需要 path 和 component。唯一的區(qū)別是你要把子路由放在父路由的 children 數(shù)組中。

//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
      }
    ] },