一、路由时传递参数的方式
1、在查询参数中传递数据，如
1 //前台页面 2 <a routerLink="/product" [queryParams]="{id:1}">商品详情</a> 3 //后台页面获取参数 4 export class ProductComponent implements OnInit { 5 private productId: number; 6 constructor(private routeInfo: ActivatedRoute) { } 7 ngOnInit() { 8 this.productId = this.routeInfo.snapshot.queryParams['id']; 9 } 10 }
相应的后台获取是：ActivedRoute.queryParams[id]
2、在路由路径中传递数据，
//前台页面 <a [routerLink]="['product', 1]">商品详情</a> //后台页面，先修改路由定义，app-routing.modules.ts中 const routes: Routes = [ {path: 'product/:id', component: ProductComponent}, {path: '**', component: HomeComponent}, ];
this.productId = this.routeInfo.snapshot.params['id'];
在路由定义时，定义为
3、在路由配置中传递数据，
1 //前台页面 2 <input type="button" value="商品详情" (click)='toProductDetails()' > 3 //后台页面 4 toProductDetails() { 5 this.router.navigate(['/product', 2]); 6 } 7 this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
二、后台接收路由参数方式
1、snapshot和subscribe两种，区别在于在路由地址不变的情况下，若参数发送变化后者所接收的参数也会随之变化，前者不变。
三、路由重定向
访问一个特定的地址时，会将其重定向到另一个指定的地址
1 //在定义路由时 2 {path: '', redirectTo: '/home', pathMatch: 'full' }, 3 {path: 'home', component : HomeComponent},
