angular 路由傳參

第一種形式: 傳字符串

第一步: 組件傳參; 選擇routerLink或navigate形式

(1). routerLink配置形式 (transmiteData= JSON.stringify({name: '11', id: '22'}); JSON字符串)

<a class="ori-text" href="javascript:;" [routerLink] = "['/child', 'aa']">...</a>
<a class="ori-text" href="javascript:;" [routerLink] = "['/child', transmiteData ]">...</a>

(2). navigate配置形式

// 第一步：引入Router對象
import {Router} from '@angular/router';
 // 第二步：在構造函數中注入 
constructor(private _router: Router) { }
 // 第三步：配置跳轉
this._router.navigate(['child', this.transmiteData]);

第二步: 配置路由

{path: 'child/:obj', component: ChildComponent}

第三步: ChildComponent取參數 --- 注意取值時用的是ActivatedRoute的params；

// 第一步：引入Router對象
import {ActivatedRoute} from '@angular/router';
 // 第二步：在構造函數中注入 
constructor(private _activateRoute: ActivatedRoute) { }
// 第三步：取路由參數
this._activateRoute.params.subscribe((data: any) => {
       console.log(data.obj);
});

第二種形式: 傳JSON對象

第一步: 組件傳參; 選擇routerLink或navigate形式

(1). routerLink配置形式 (transmiteData= {name: '11', id: '22'}; JSON對象)

<a href="javascript:;" [routerLink]="['/dhild']" [queryParams]="{id: 1, name: '111'}" >...</a>
<a href="javascript:;" routerLink="/child" (click)="transParams()">...</a>

(2). navigate配置形式

// 此處_router指的是Router對象
this._router.navigate(['rxjs'], {queryParams: {id: '111', name: '222'}});

第二步: 配置路由

{path: 'child', component: ChildComponent}

第三步: ChildComponent取參數 --- 注意取值時用的是ActivatedRoute的queryParams；

// 此處的_activatedRouter指的是ActivatedRoute對象；
this._activatedRouter.queryParams.subscribe((data: Params) => {
       console.log(data);
})