詳解Angular路由之子路由
一、子路由語(yǔ)法
二、實(shí)例
在商品詳情頁(yè)面，除了顯示商品id信息，還顯示了商品描述，和銷(xiāo)售員的信息。
通過(guò)子路由實(shí)現(xiàn)商品描述組件和銷(xiāo)售員信息組件展示在商品詳情組件內(nèi)部。
1、新建2個(gè)組件修改其內(nèi)容
ng g component productDesc ng g component sellerInfo
重點(diǎn)是修改銷(xiāo)售員信息組件，顯示銷(xiāo)售員ID。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-seller-info',
templateUrl: './seller-info.component.html',
styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {
private sellerId: number;
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this.sellerId = this.routeInfo.snapshot.params["id"];
}
}
2、修改路由配置
給商品組件加上子路由
const routes: Routes = [
{ path: '', redirectTo : 'home',pathMatch:'full' }, //路徑為空
{ path: 'home', component: HomeComponent },
{ path: 'product/:id', component: ProductComponent, children:[
{ path: '', component : ProductDescComponent },
{ path: 'seller/:id', component : SellerInfoComponent }
] },
{ path: '**', component: Code404Component }
];
3、修改product.component.ts的模版
注意：routerLink里要配置成./，不能再用/。
<p>
這里是商品信息組件
</p>
<p>
商品id是: {{productId}}
</p>
<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">銷(xiāo)售員信息</a>
<router-outlet></router-outlet>
效果：
主路由是/product/2，子路由為空字符串：
主路由的商品詳情組件顯示出來(lái)了，子路由的空字符串對(duì)應(yīng)的商品描述組件也顯示出來(lái)了。
點(diǎn)銷(xiāo)售員信息鏈接：
URL路徑變成：http://localhost:4201/product/2/seller/99。
子路由seller/99，對(duì)應(yīng)的sellerInfo組件也展示出來(lái)。
注意：
1、插座router-out形成父子關(guān)系，可以無(wú)限嵌套
2、所有的路由信息都是在模塊層，在app.routing.module.ts中配置的。
路由信息都是在模塊層，所有的組件本身，并不知道任何跟路由相關(guān)的信息。
插座之間的父子關(guān)系——子路由。
插座之間的兄弟關(guān)系——輔助路由。
以上就是詳解Angular路由之子路由的詳細(xì)內(nèi)容，更多關(guān)于Angular的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Angular outlet實(shí)現(xiàn)頁(yè)面布局示例詳解
這篇文章主要為大家介紹了Angular outlet實(shí)現(xiàn)頁(yè)面布局示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
本文介紹了其在AtScript、改善依賴入駐、Annotations、路由方案等方面的改變。雖然不知道打破原有是否是件好事，不過(guò)由于不向后兼容，我們需要為遷移做好計(jì)劃2016-02-02
ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證）
能夠驗(yàn)證用戶在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
這篇文章主要介紹了Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法示例
這篇文章主要給大家介紹了利用Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，下面來(lái)一起看看吧。2017-02-02
Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例
本篇文章主要介紹了Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn)
本篇文章主要介紹了詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05