子路由

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>