angular路由传递参数_Angular路由参数传递

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

1、在查询参数中传递数据，如

//前台页面

商品详情

//后台页面获取参数

export class ProductComponent implements OnInit {

private productId: number;

constructor(private routeInfo: ActivatedRoute) { }

ngOnInit() {

this.productId = this.routeInfo.snapshot.queryParams['id'];

}

}

相应的后台获取是：ActivedRoute.queryParams[id]

2、在路由路径中传递数据，

//前台页面

商品详情

//后台页面，先修改路由定义，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

3 //后台页面

4toProductDetails() {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},