详解Angular路由之子路由

ng g ponent productDesc
ng g ponent sellerInfo

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-seller-info',
  templateUrl: './seller-info.ponent.html',
  styleUrls: ['./seller-info.ponent.css']
})
export class SellerInfoComponent implements OnInit {
  private sellerId: number;
  constructor(private routeInfo: ActivatedRoute) { }

  ngOnInit() {
    this.sellerId = this.routeInfo.snapshot.params["id"];
  }

}

const routes: Routes = [
  { path: '', redirectTo : 'home',pathMatch:'full' }, //路径为空
  { path: 'home', ponent: HomeComponent },
  { path: 'product/:id', ponent: ProductComponent, children:[
    { path: '', ponent : ProductDescComponent },
    { path: 'seller/:id', ponent : SellerInfoComponent }
  ] },
  { path: '', ponent: Code404Component }
];

<p>
  这里是商品信息组件
</p>
<p>
  商品id是: {{productId}}
</p>

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>