Angular路由参数传递

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

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