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);
})