一、子路由語法：

二、實(shí)例

在商品詳情頁面，除了顯示商品id信息，還顯示了商品描述，和銷售員的信息。

通過子路由實(shí)現(xiàn)商品描述組件和銷售員信息組件展示在商品詳情組件內(nèi)部。

1、新建2個(gè)組件修改其內(nèi)容

ng g component productDesc ng g component sellerInfo

重點(diǎn)是修改銷售員信息組件，顯示銷售員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]">銷售員信息</a> <router-outlet></router-outlet>

效果：

主路由是/product/2，子路由為空字符串：

主路由的商品詳情組件顯示出來了，子路由的空字符串對應(yīng)的商品描述組件也顯示出來了。

點(diǎn)銷售員信息鏈接：

URL路徑變成：http://localhost:4201/product/2/seller/99。

子路由seller/99，對應(yīng)的sellerInfo組件也展示出來。

?

注意：

1、插座router-out形成父子關(guān)系，可以無限嵌套

2、所有的路由信息都是在模塊層，在app.routing.module.ts中配置的。

路由信息都是在模塊層，所有的組件本身，并不知道任何跟路由相關(guān)的信息。

?

插座之間的父子關(guān)系——子路由。

插座之間的兄弟關(guān)系——輔助路由。

?

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/9006207.html?有問題歡迎與我討論，共同進(jìn)步。

轉(zhuǎn)載于:https://www.cnblogs.com/starof/p/9006207.html

總結(jié)

以上是生活随笔為你收集整理的Angular路由——子路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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