Angular最新教程-第十一節 路由四 （嵌套路由）

今天我們繼續來看路由。
這是我們關於路由的最後一節課。
嵌套路由的使用還是蠻頻繁的，

使用場景

場景一：
商城類應用會有大分區裏面的小分區，
雖然也可以靠攜帶不同的路由參數來識別，
但是他們都在同一個視圖裏面，就會有一個很明顯的問題。
有的分類內容比較多，列表很長，有些分類內容比較少，列表很短。
當從內容豐富的分類切換到內容很少的分類的時候，
會出現，內容很少的頁面，下半部分會有一大片的空白。
滾動條也保留在原來的位置。
場景二：
關於我們內容裏面很大可能會存在出現下面的分類。
比如一個醫院網站的關於，會有醫生、護士、還有醫生個人簡介，
這樣的帶着明顯嵌套邏輯的頁面。
場景三：
用戶個人中心。（pc頁面）
我們還是拿Angular中文社區的網站來看。

從圖中我們可以知道，它的用戶頁面的路由是/home。
點擊切換到我的關注、我的粉絲等，路由分別是/home/follow、/home/fans。

配置路由

1、新建用戶頁面
$ ng generate component home
2、新建用戶頁面-我的主頁
$ ng generate component home/main
3、新建用戶頁面-我的關注
$ ng generate component home/follow
4、打開src\app\home\home.component.ts
在頭部導入
import { ActivatedRoute,Router,Routes } from ‘@angular/router’;
import { MainComponent } from ‘./main/main.component’;
import { FollowComponent } from ‘./follow/follow.component’;
在構造函數中注入
constructor(private router:Router,private route:ActivatedRoute) { };
定義子路由並導出

export const childRoutes:Routes=[
  {path:'',redirectTo:'main',pathMatch:'full'},
  {path:'main',component:MainComponent},
  {path:'follow',component:FollowComponent}
]

5、打開src\app\home\home.component.html
複製src\app\app.component.html的部分代碼，稍作修改。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" [routerLink]="['./main']">我的主頁</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['./follow']">我的關注</a>
  </li>
</ul>
<router-outlet></router-outlet>

注意這裏的<router-outlet></router-outlet>
和主頁app.component.html中的<router-outlet></router-outlet>是不同的。

外層的navbar控制的是紅色框框的路由切換。
內層的navbar控制的是藍色框框的路由切換。

源代碼：百度雲 實際代碼變化較少，不更新壓縮文件。
碼雲：https://gitee.com/xiaohuOni/oniplan-ng
有碼雲的幫忙給個star，感謝。

這節課的內容就到這裏完成了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_