Angular 父子路由或嵌套路由

本節學習父子路由，應用場景如下圖網站所示：

 我們來分析下 ng 官網，上面部分是導航欄，下面部分分別是左側導航欄和右邊內容部分，繼續我們之前的路由基礎知識環節的學習，上面導航欄部分就相當於在根組件中實現 a 標籤的路由導航，接下來左側邊導航欄就類似子組件，當點擊左側導航欄的時候，在右側內容部分展示對應的信息，這個環節就涉及到本節要學習的父子路由（或者嵌套路由）；

CLI創建項目和路由的基本配置這裏有不再演示，類似上面的應用場景有很多很多的網站，下面簡單的總結一下創建父子路由：

• 父組件路由中的子組件路由配置：

const routes: Riutes =[
  //這裏類比ng 特性組件路由配置
  {path:'ngtx', component:NgTxComponent,
    children:[
        {parth:'kpt',component:KptComponent}, //跨平臺
        {parth:'sdxn',component:SdXnComponent}, //速度與性能
        {parth:'**',redirectTo:'kpt'} //**通配，默認顯示kpt
    ]
  },
  //這裏類比ng 文檔組件路由配置
  {path:'ngdoc', component:NgDocComponent,
    children:[
        {parth:'jbyl',component:JbylComponent}, //基本原理
        {parth:'jbhj',component:JbhjComponent}, //基本環境
        {parth:'**',redirectTo:'jbhl'} //**通配，默認顯示jbhl
    ]
  },
  {parth:'**',pathMatch:'full',redirectTo:'ngtx'} //**通配，默認顯示【特性】組件
];

• 根組件實現菜單欄導航標籤；

<!-- 【實現頭部導航欄】 -->
<header>
    <nav>
        <a title="特性" [routerLink]="['/ngtx']" routerLinkActive="active">特性</a>
        <a title="文檔" [routerLink]="['/ngdoc']" routerLinkActive="active">文檔</a>
    </nav>
</header>
<router-outlet></router-outlet> <!--根組件掛載路由-->

• 子組件頁面基本標籤，公共基本樣式佈局如上圖（此處省略）；

<!-- 【實現特性子組件】 -->
<article>
    <aside class="navLeft">
        <a title="跨平臺" [routerLink]="['/ngtx/kpt']" routerLinkActive="active">跨平臺</a>
        <a title="速度與性能" [routerLink]="['/ngtx/sdxn']" routerLinkActive="active">速度與性能</a>
    </aside>
    <section class="contentRight">
        <router-outlet></router-outlet>  <!--子組件掛載路由-->
    </section>
</article>

<!-- 【實現文檔子組件】 -->
<article>
    <aside class="navLeft">
        <a title="基本原理" [routerLink]="['/ngdoc/jbyl']" routerLinkActive="active">基本原理</a>
        <a title="基本環境" [routerLink]="['/ngdoc/jbhj']" routerLinkActive="active">基本環境</a>
    </aside>
    <section class="contentRight">
        <router-outlet></router-outlet>  <!--子組件掛載路由-->
    </section>
</article>

分別在子組件【跨平臺】，【速度與性能】，【基本原理】，【基本環境】中實現對應的效果即可，以上就是實現父子組件路由（或者嵌套路由）的基本實踐過程。