Как проложить навигационную вкладку с параметрами в angular?

Question

Допустим, я нахожусь на вкладке Tab1 с параметром id = 1. Конкретно, полученный URL-адрес http://localhost: 4200 / project / tab1; id = 1 . Теперь я нажимаю Tab2 и URL меняется на http://localhost: 4200 / project / tab2 . Есть ли способ направить идентификатор тоже, чтобы я получил 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 на маршрутизаторе.

Пример: (this.router is 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», но он работает.

Другие варианты:

• использование NavigationResolver
• Реализация Конечный автомат типа NgRx
• Создайте службу и используйте EventEmitter для широковещательной передачи id любым другим компонентам, которые могут захотеть узнать об этом.