場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

Angular中的路由配置、路由重定向、默認選中路由：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

如果要實現如下這種父子路由的嵌套

?

首先新建三個組件home組件、welcome組件、setting組件，其中home組件是父組件，welcome組件和setting組件是子組件

ng g component components/home ng g component components/home/welcome ng g component components/home/setting

?

然后在app-routing.module.ts中引入這三個組件并配置父子路由

import { HomeComponent } from './components/home/home.component'; import { WelcomeComponent } from './components/home/welcome/welcome.component'; import { SettingComponent } from './components/home/setting/setting.component'; const routes: Routes = [{path:'home',component:HomeComponent,children:[{path:'welcome',component:WelcomeComponent},{path:'setting',component:SettingComponent},{path:'**',redirectTo:'welcome'}]} ];

最后一個兩個星號的路由配置是配置默認路由是歡迎組件的頁面。

然后在home頁添加路由跳轉

<div class="content"><div class="left"><a [routerLink]="[ '/home/welcome']" routerLinkActive="active">歡迎首頁</a><br><br><a [routerLink]="[ '/home/setting']" routerLinkActive="active">系統設置</a></div><div class="right"><router-outlet></router-outlet></div></div>

?為了讓子組件顯示在父組件中所以添加<router-outlet></router-outlet>

為了顯示出左右布局，所以在home的scss中添加樣式

.content{width:100%;height:500px;display:flex;.left{width:200px;border-right:1px solid #eee;height:500px;}.right{flex:1px;} }

運行項目看效果

總結

以上是生活随笔為你收集整理的Angular中路由的嵌套-父子路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。