angular6路由传参及获取参数

angular路由跳转

一.问号传参

跳转方式，页面跳转或js跳转
问号传参的url地址显示为 …/list-item?id=1

<!-- 页面跳转 -->
<a [routerLink]="['/list-item']" [queryParams]="{id:item.id}"> 
	<span>{{ item.name }}</span>
</a>

//js跳转
//router为ActivatedRoute的实例
this.router.navigate(['/list-item'], {
	queryParams: {
		id: this.itemId
	},
	skipLocationChange: true  //可以不写，默认为false，设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效
});

获取参数方式

this.route.queryParams.subscribe(
	params => {
		this.id= params['id'];
	}
);

二. 路径传参

路径传参的url地址显示为 …/list-item/1

<!-- 页面跳转 -->
<a [routerLink]="['/list-item', item.id]">
	<span>{{ item.name }}</span>
</a>

//js跳转
//router为ActivatedRoute的实例
this.router.navigate(['/list-item', item.id]);

路径配置：

	{path: 'list-item/:id', component: ListItemComponent}

获取参数方式

this.route.params.subscribe(
	param => {
		this.id= param['id'];
	}
)