angular 4 router传递数据三种方法

1.在查询参数中传递数据

 

Html代码 

• <a  [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}">product</a>  

   然后在app-routing.module.ts中配置

 

 

Js代码 

• const routes: Routes = [  
•   {path: 'product', component: ProductComponent}  
• ];  

   最后在product.component.ts中接收参数

 

 

Js代码 

• private productShop: any = {};  
• constructor(private routeInfo: ActivatedRoute ) { }  
• ngOnInit() {  
• this.routeInfo.queryParams.subscribe(queryParams => {  
• this.productShop.id = queryParams.id;  
• this.productShop.name = queryParams.name;  
•   });  
• }  

   当然记得 ActivatedRoute是需要注入。。。在页面就可以打印出来了

 

 

2.路由路径中传递参数 （在这里我会将2种参数接收方式）

 

Html代码 

• <a  [routerLink]="['/product',1]">product</a>  

 然后在app-routing.module.ts中配置

 

 

Js代码 

• const routes: Routes = [  
•   {path: 'product/:id', component: ProductComponent}  
• ]; 

   最后在product.component.ts中接收参数

 

 第一种 也称作 参数快照

Js代码 

• private productShop: number;  
• constructor(private routeInfo: ActivatedRoute ) { }  
• ngOnInit() {  
• this.productShop = this.routeInfo.snapshot.params['id'];  
• }  

 第二种 也称作 参数订阅

Js代码 

• private productShop: any;  
• constructor(private routeInfo: ActivatedRoute ) { }  
• ngOnInit() {  
• this.routeInfo.params.subscribe(params => this.productShop = params['id']);  
• }  

 区别也就在于url地址相同，传递参数不同时（比如说，一个是a标签方式跳转，一个是点击事件的方式跳转，2种情况同时存在时），使用第二种方法，

 不存在这种情况的时候使用可以使用第一种

 

3.路由配置中传递参数（当然也要2中写法）

 

Js代码 

• onProduct() {  
• this.router.navigate(['product', 2]);  
• }  

 这里主要讲第二种

Html代码 

• <button (click)="onProduct()">商品详情</button>  

 

Js代码 

• onProduct() {  
• this.router.navigate(['product'], {queryParams: {id: 2, name: 'dongtian'}});  
• }  

 

Js代码 

• private productShop: any = {};  
• constructor(private routeInfo: ActivatedRoute ) { }  
• ngOnInit() {  
• this.routeInfo.queryParams.subscribe( queryParams => {  
• this.productShop.id = queryParams.id;  
• this.productShop.name = queryParams.name;  
•     });  
• }  

转载于:https://www.cnblogs.com/webPang/p/8526865.html