路由时传递数据的方式：
-
在查询参数中传递
//传递数据
...
<a [routerLink]="['/stock']" [queryParams]="{id: 1}">股票详情</a>
// 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 }
];
//传递数据
...
<a [routerLink]="['/stock', 1]">股票详情</a>
// 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'];
