場(chǎng)景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項(xiàng)目入門(mén)教程：

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

Angular新建組件以及組件之間的調(diào)用：

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

通過(guò)以上搭建起Angular項(xiàng)目。

Angular中的路由配置、路由重定向、默認(rèn)選中路由：

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

如果要實(shí)現(xiàn)如下這種父子路由的嵌套

?

首先新建三個(gè)組件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中引入這三個(gè)組件并配置父子路由

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'}]} ];

最后一個(gè)兩個(gè)星號(hào)的路由配置是配置默認(rèn)路由是歡迎組件的頁(yè)面。

然后在home頁(yè)添加路由跳轉(zhuǎn)

<div class="content"><div class="left"><a [routerLink]="[ '/home/welcome']" routerLinkActive="active">歡迎首頁(yè)</a><br><br><a [routerLink]="[ '/home/setting']" routerLinkActive="active">系統(tǒng)設(shè)置</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;} }

運(yùn)行項(xiàng)目看效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。