标签：angular nav edr ams class 前台 参数传递 rect tail
一、路由时传递参数的方式
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},
标签：angular nav edr ams class 前台 参数传递 rect tail
原文地址：https://www.cnblogs.com/adjk/p/10265727.html
