Маршрутизация к определенной вкладке с помощью NGX-Bootstrap

Question

Я работаю над проектом, использующим Angular 6 с вкладками NGX-Bootstrap.

Что я пытаюсь сделать: перейти на страницу моих вкладок с другой страницы, но к определенной вкладке. Пока что я могу перейти на страницу с вкладками, с правильным путем, отображаемым в URL (/ tabsPage # tab2), но он все равно попадает на первую вкладку, а не на вторую.

app.component.ts

@ViewChild('staticTabs') staticTabs: TabsetComponent;

this.route.fragment.subscribe((fragment: string) => {
  if(fragment){
    let id = this.staticTabs.tabs.findIndex(f => f.id == fragment);

    if(id > 0)
      this.staticTabs.tabs[id].active = true;
  }
}

app.component.html

<tabset #staticTabs>
  <tab id="tab1" heading="Tab 1"></tab>
  <tab id="tab2" heading="Tab 2"></tab>
  <tab id="tab3" heading="Tab 3"></tab>
</tabset>

случайный page.component.html

<a [routerLink]="['/tabsPage']" fragment="tab2">Jump to Tab 2</a>

Любая помощь по этому вопросу будет принята с благодарностью. Спасибо!

Answer 1

Мне удалось заставить работать версию моего исходного кода. Мой "this.route.fragment" должен был быть внутри подписки / ответа для функции в моем ngOnInit. В итоге я использовал следующее для маршрутизации от random-page.component.html ко второй вкладке в app.component.html :

.subscribe(
  response => {
    this.setHouseWatchVehicle(response);

    this.router.navigate([
      `/housewatch/edit/${response.agency}-${response.watchYear}-${response.watchId}`
    ], this.navigationExtras);
  },
);

И затем функция в app.component.ts для вызова при загрузке страницы:

fragmentTabs() {
  this.route.fragment.subscribe((fragment: string) => {
    if(fragment) {
      let id = this.staticTabs.tabs.findIndex(f => f.id == fragment);
      if(id > 0)
        this.staticTabs.tabs[id].active = true;
    }
  });
}

Answer 2

Я бы использовал параметры запроса. Они лучше подходят и могут использоваться как таковые:

  public ngOnInit() {
    this.activatedRoute.fragments.subscribe(
      (fragment) => { console.log(fragment) }
    );
  }

А в html:

<a [routerLink]="['/a', { fragment: 'foo' }]">Jump to Tab A</a>
<a [routerLink]="['/b', { fragment: 'bar' }]">Jump to Tab B</a>

Рабочий пример: https://stackblitz.com/edit/angular-1738es