子路由

1、设置子路由 app-routing

const routes: Routes = [ {path: '', redirectTo: '/home',pathMatch:'full'}, {path: 'home', component:HomeComponent}, {path: 'product/:id', component:ProductComponent,children:[ {path: '', component:ProductDescComponent}, {path: 'sellerID/:id', component:SellerInfoComponent} ]}, {path: '**', component:Code404Component}, ];

2.product HTML

<p>这里是商品信息组件!</p> <p>商品ID是{{productId}}</p> <a [routerLink]="['./']">商品描述 </a> <a [routerLink]="['./sellerID',9]">销售员信息</a> <router-outlet></router-outlet>

3.seller-info TS

export class SellerInfoComponent implements OnInit { public sellerID:number; constructor(private routeInfo: ActivatedRoute) { } ngOnInit(): void { this.sellerID = this.routeInfo.snapshot.params["id"]; } }

4.seller-info HTML

<p>这厮是一个大忽悠销售员{{sellerID}}</p>