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 } ];
<p> product works! </p> <p>商品Id{{productId}}</p> <a [routerLink]="['./']">商品描述</a> <a [routerLink]="['./seller',99]">销售员信息</a> <router-outlet></router-outlet>
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"]; } } <p> 销售员Id是:{{sellerId}} </p>
<p>
牛X商品
</p>