angular路由参数_angular 路由传参

第一种形式: 传字符串

第一步: 组件传参; 选择routerLink或navigate形式

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

...

...

(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对象)

...

...

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

})