使用NGX引导程序路由到特定选项卡

Question

我正在做一个项目，使用Angular 6和NGX Bootstrap选项卡。

我正在努力实现的是：从不同的页面路由到我的选项卡页面，但路由到特定的选项卡。到目前为止，我可以导航到带有选项卡的页面，正确的路径显示在URL中(/tabsPage#tab2(，但它仍然落在第一个选项卡上，而不是第二个选项卡上。

应用程序组件.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>

随机页面组件.html

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

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我会使用查询参数。它们更适合并且可以这样使用：

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

Answer 2

我能够使我的原始代码的一个版本正常工作。我的"this.route.fragment"必须在我的ngOnInit中的函数的订阅/响应中。我最终使用以下方法从random page.component.html路由到app.components.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;
}
});
}