Angular 如何在角度中使用参数路由导航选项卡?

Angular 如何在角度中使用参数路由导航选项卡?,angular,Angular,假设我在Tab1处,参数id=1。具体来说,生成的url是。现在我单击Tab2,url变为。有没有办法把身份证也发送出去,这样我就可以 您可以通过在路由器上设置状态来完成此操作 示例:(this.router是router) 或 如果发现路由器太吵,您可能需要订阅路由器事件并等待NavigationEnd 另一种选择是从历史记录.state.data中获取它。我认为这不是“角度的方式”,但它是有效的 其他选择包括: 使用NavigationResolver 实现像NgRx这样的状态机 创建一

假设我在Tab1处,参数id=1。具体来说,生成的url是。现在我单击Tab2,url变为。有没有办法把身份证也发送出去,这样我就可以


您可以通过在路由器上设置
状态来完成此操作

示例:(
this.router
router

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

另一种选择是从
历史记录.state.data
中获取它。我认为这不是“角度的方式”,但它是有效的

其他选择包括:

  • 使用NavigationResolver
  • 实现像NgRx这样的状态机
  • 创建一个服务,并使用
    EventEmitter
    id
    广播给可能想要了解它的任何其他组件

你能在stackblitz上创建一个演示吗?这里有一个演示,但不知怎的,它在stackblitz上不起作用。我应该在哪里使用这个.router.navigate?导航选项卡不使用此选项导航到指定的选项卡url。你能展示stackblitz演示吗?然后我会在html模板中使用
[routerLink]
[state]
指令。无论是在TypeScript中还是在HTML中执行,都没有区别。
<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 },
];
// In TypeScript
this.router.navigate(['/tab1'], {state: {something: 1}});
// In HTML
<a [routerLink]=”/tab1” [state]=”{ something: 1}”>Go to B</a>
this.router.getCurrentNavigation().extras.state.something