父子路由的用法
父子路由一般用在頁面中的一個小地方，只是通過某個觸發按鈕，改變整個頁面中的一部分區域變化
通過以上兩張圖片可以明顯的看到路徑localhost：4200/home是一樣的，不一樣的只是后面一部分
而后面的welcome和setting 正是兩個頁面的名稱，同時也是通過左側的兩個按鈕通過超鏈接的方式連接過去，從而達到點擊觸發按鈕，整個頁面中只有右側不一樣
父子路由實現步驟（實例）：
1.新建兩個組件
ng g component components/home
ng g component components/list
2.新建子組件(可以不按照這種方法新建，此辦法新建會更加直觀分清楚父子組件)
ng g component components/home/welcome 和 ng g component components/home/setting
ng g component components/list/listInfo 和 ng g component components/list/lists
3.路由設置（app-routing.modules）
1.新引進注入創建的組件
import { HomeComponent } from '../app/components/home/home.component';
import { ListComponent } from '../app/components/list/list.component';
import { WelcomeComponent } from '../app/components/home/welcome/welcome.component';
import { SettingComponent } from '../app/components/home/setting/setting.component';
import { ListsComponent } from '../app/components/list/lists/lists.component';
import { ListInfoComponent } from '../app/components/list/list-info/list-info.component';
2.路由配置（routes中）
{path:"home",component:HomeComponent,
children:[
{path:"welcome",component:WelcomeComponent},
{path:"setting",component:SettingComponent},
{path:"**",redirectTo:"welcome"}
]
},
{path:"list",component:ListComponent,
children:[
{path:"list-info",component:ListInfoComponent},
{path:"lists",component:ListsComponent},
{path:"**",redirectTo:"lists"}
]
},
{path:"**",redirectTo:"home"}
解析：一級路由（父路由）
{path:"home",component:HomeComponent}，
{path:"list",component:ListComponent}，
{path:"**",redirectTo:"home"}
二級路由（子路由）
對應的子路由需要嵌入到父級中，形成對應的嵌套
{path:"home",component:HomeComponent,
children:[
{path:"welcome",component:WelcomeComponent},
{path:"setting",component:SettingComponent},
{path:"**",redirectTo:"welcome"}
]
}
路由重定向 {path:"**",redirectTo:"home"} 此句的意思為：當找不到以上對應的嵌套的時候，則默認跳轉到首頁，子路由中同時也是需要給出默認的頁面，否則就會出現空白部分
4.在對應的頁面中的寫法：
4-1.跟頁面中的寫法（app.component.html）中
<header class="header">
<div class="content">
<p>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁</a>
</p>
<p>
<a [routerLink]="[ '/list' ]" routerLinkActive="active">商品</a>
</p>
</div>
</header>
<router-outlet></router-outlet>
4-1-1 app.component.scss(此處我使用的是scss預處理寫法)
.header{
width: 100%; height: 30PX; line-height: 30PX; background: #000;
p{width:100px;float: left;
a{color: #fff;}
}
}
4-2 .在home.component.html 和 list.component.html中
<div class="content">
<div class="left">
<p> <a [routerLink]="[ '/home/welcome' ]" routerLinkActive="active">歡迎首頁</a></p>
<p>
<a [routerLink]="[ '/home/setting' ]" routerLinkActive="active">系統設置</a>
</p>
</div>
<div class="right">
<router-outlet></router-outlet>
</div>
</div>
注釋：在右側中為什么寫的是router-outlet,是因為右側是需要改變的，並且運用此標簽我們可以通過動態的路由把內容（子路由傳遞子組件的內容）傳遞過來，所以這里只需要寫上一句<router-outlet></router-outlet>即可
4-2-2 home.component.scss 和 list.component.scss中
.content{width: 100%;height: 500px; display: flex;
.left{width: 200px; float: left; height: 500px;border-right: 1px solid #eee;
p{height: 30px; line-height: 30px;}
}
.right{flex: 1px;}
}
4-3 setting.component.html welcome.component.html list-info.component.html lists.component.html 四個子組件中進行分別寫入想寫的內容
5.ng serve運行 項目實現
