假设我在 Tab1,参数 id=1。具体的结果 url 是 http://localhost:4200/project/tab1;id=1 .现在我单击 Tab2 并且 url 更改为 http://localhost:4200/project/tab2 .有没有办法路由id,以便我得到http://localhost:4200/project/tab2;id=1 ?
https://stackblitz.com/edit/angular-qzwzju
<nav mat-tab-nav-bar [backgroundColor]="'primary'">
<div mat-tab-link *ngFor="let link of navTabs" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</div>
</nav>
<router-outlet></router-outlet>
navTabs: NavTab[];
activeLinkIndex: number = -1;
constructor(private router: Router, private route: ActivatedRoute) {
this.navTabs = [
{ label: 'Tab1', link: './tab1', index: 0 },
{ label: 'Tab2', link: './tab2', index: 1 },
{ label: 'Tab3', link: './tab3', index: 2 },
];
}
ngOnInit(): void {
this.router.events.subscribe((res) => {
this.activeLinkIndex = this.navTabs.indexOf(this.navTabs.find((tab: NavTab) => tab.link === '.' + this.router.url));
});
}
export const appRoutes: Routes = [
{ path: 'tab1', component: Tab1Component },
{ path: 'tab2', component: Tab2Component },
{ path: 'tab3', component: Tab3Component },
];
最佳答案
您可以通过设置 state
来做到这一点。在路由器上。
示例:( this.router
是 Router
)
// In TypeScript
this.router.navigate(['/tab1'], {state: {something: 1}});
或者
// In HTML
<a [routerLink]=”/tab1” [state]=”{ something: 1}”>Go to B</a>
然后,在您的目标组件中,您可以从
state
中检索值。经过:this.router.getCurrentNavigation().extras.state.something
您可能需要订阅路由器事件并等待
NavigationEnd
如果你觉得它太吵了。另一种选择是从
history.state.data
获取它.我认为这不是“Angular 方式”,但它有效。其他选项是:
EventEmitter
转播id
任何其他可能想了解它的组件。 关于angular - 如何使用 Angular 参数路由导航选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60581861/