如何使用角度参数路由导航选项卡？

Question

假设我在 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 },
];

Answer 1

state您可以通过在路由器上设置来做到这一点。

\n\n

示例： (this.router是Router)

\n\n

// In TypeScript\nthis.router.navigate([\'/tab1\'], {state: {something: 1}});\n

\n\n

或者

\n\n

// In HTML\n<a [routerLink]=\xe2\x80\x9d/tab1\xe2\x80\x9d [state]=\xe2\x80\x9d{ something: 1}\xe2\x80\x9d>Go to B</a>\n

\n\n

然后，在您的目标组件中，您可以通过以下方式检索值state：

\n\n

this.router.getCurrentNavigation().extras.state.something\n

\n\n

NavigationEnd如果您发现它太吵闹，您可能需要订阅路由器事件并等待。

\n\n

另一种选择是直接从 获取它history.state.data。我认为这不是“有角度的方式”，但它确实有效。

\n\n

其他选项有：

\n\n

\n
• 使用导航解析器
\n
• 实现像 NgRx 这样的状态机
\n
• 创建一个服务并使用EventEmitter广播id到可能想了解它的任何其他组件。
\n

\n