1、第一种(一般都采用这种姿势)
1、连接配置 queryParams
<a routerLink="/stock" [queryParams]="{id: 1}"></a>
2、ts
export class StockComponent implements OnInit {
private stockId: number;
constructor(private routeInfo: ActivatedRoute) {}
ngOnInit() {
this.stockId = this.routeInfo.snapshot.queryParams["id"] // = 1
}
}
2、第二种
1、路由配置
{ path: 'stock/:id', component: StockConponent }
2、连接配置
<a [routerLink]="['/stock', 1]"></a>
3、ts
export class StockComponent implements OnInit {
private stockId: number;
constructor(private routeInfo: ActivatedRoute) {}
ngOnInit() {
this.stockId = this.routeInfo.snapshot.params["id"] // = 1
}
}
3、第三种
1、路由配置
{ path: 'stock/:id', component: StockConponent, data: [{id: 2}] }
2、ts
export class StockComponent implements OnInit {
private stockId: number;
constructor(private routeInfo: ActivatedRoute) {}
ngOnInit() {
this.stockId = this.routeInfo.snapshot.data[0]["id"] // = 1
}
}
补充-事件跳转姿势
// 不带参数
this.router.navigateByUrl('/childAccount/add-account');
// 带参数
this.router.navigate(['/product/project/add'], { queryParams: {oper: 'edit'}});
补充-参数订阅问题
由于路由发生变化只会加载一次组件导致
import { ActivatedRoute, Params } from '@angular/router';
export class StockComponent implements OnInit {
private stockId: number;
constructor(private routeInfo: ActivatedRoute) {}
ngOnInit() {
this.routeInfo.params.subscribe((params: Params) => this.stockId = params['id']) // 每次参数发生变化都会被调用
this.stockId = this.routeInfo.snapshot.params["id"] // = 1 初始化调用
}
}
网友评论