angular路由传递参数_Angular路由传递参数的3种方式

路由时传递数据的方式：

在查询参数中传递

//传递数据

...

股票详情

// http://localhost:4200/stock?id=1

//接受参数

...

import { ActivatedRoute } from '@amgular/router';

export class StockComponent implements OnInit {

private stockId: number;

constructor(private routeInfo: ActivatedRoute)

ngOnInit() {

this.stockId = this.routeInfo.snapshot.queryParams['id'];

}

}

在路由路径中传递

//修改配置

const routes: Routes = [

{path: '', redirectTo: '/index', pathMatch: 'full'},

{path: 'index', component: IndexComponent},

{path: 'stock/:id', component: StocksComponent },

{path: '**', component: ErrorPageComponent }

];

//传递数据

...

股票详情

// http://localhost:4200/stock/1

//接受参数

...

import { ActivatedRoute } from '@amgular/router';

export class StockComponent implements OnInit {

private stockId: number;

constructor(private routeInfo: ActivatedRoute)

ngOnInit() {

this.stockId = this.routeInfo.snapshot.params['id'];

}

}

使用snapshot快照的方式传递数据，因为初始化一次，路由到自身不能传递参数，需要使用订阅模式。

this.routeInfo.params.subscribe((params: Params) => this.stockId = params['id']);

在路由配置中传递

//路由配置配置

const routes: Routes = [

{path: '', redirectTo: '/index', pathMatch: 'full'},

{path: 'index', component: IndexComponent, data: {title: 'Index Page'}},

{path: 'stock/:id', component: StocksComponent, data: {title: 'Stock Page'}},

{path: '**', component: ErrorPageComponent, data: {title: 'Stock Page'}}

];

//接受参数

this.title = this.routeInfo.snapshot.date[0]['title'];