angular2通過路由進行元件間傳值
阿新 • • 發佈:2018-11-29
一、傳參
在傳值元件component.ts的constructor函式裡面先宣告router:
import { Router} from '@angular/router';
constructor(
public router: Router,
) {}
1.routerLink
單一引數:在<a routerLink=["/exampledetail",id]></a>中加routerLink進行跳轉,其中/exampledetail是我設定的路由path,id是需要傳遞的引數。
多個引數:如果要傳多個引數,則可以寫成routerLink=["/exampledetail",{queryParams:object}] ,queryParams攜帶多個引數,這個引數的格式可以是自行組織的object,也可以分開多個引數寫成routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];。
2.router.navigate
單一引數:this
.router.navigate([
'/exampledetail'
,id]); ,多用在呼叫方法裡
多個引數:
this
.router.navigate([
'/exampledetail'
],{queryParams:{
'name'
:
'yxman'
}});
3.router.navigateByUrl
單一引數:
this
.router.navigateByUrl(
'/exampledetail/id'
);
多個引數:this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});
二、接受引數
在接受引數的元件裡面的constructor函式裡面宣告:
import { ActivatedRoute } from '@angular/router';
constructor(
private activeRoute: ActivatedRoute
) { }
接受引數:
this.activeRoute.queryParams.subscribe(params => {
this.uid = params['uid'];
})