Angular路由参数传递

一、路由时传递参数的方式

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},

 

posted on 2017-11-27 23:22  Bonjour_ing  阅读(5134)  评论(0)  编辑  收藏  举报