詳解Angular路由之子路由

更新時間：2021年05月24日 10:16:19 作者：starof

本文將介紹Angular子路由的用法，對此感興趣的同學(xué)，可以參考下

一、子路由語法

二、實例

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

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

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

ng g component productDesc
ng g component sellerInfo

重點是修改銷售員信息組件，顯示銷售員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)的商品描述組件也顯示出來了。