一、路由时传递参数的方式
1、在查询参数中传递数据,如
//前台页面
<a routerLink="/product" [queryParams]="{id:1}">商品详情</a>
//后台页面获取参数
export class ProductComponent implements OnInit {
private productId: number;
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams['id'];
}
}
相应的后台获取是: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两种,区别在于在路由地址不变的情况下,若参数发送变化后者所接收的参数也会随之变化,前者不变。
三、路由重定向
访问一个特定的地址时,会将其重定向到另一个指定的地址
//在定义路由时
{path: '', redirectTo: '/home', pathMatch: 'full' },
{path: 'home', component : HomeComponent},