javascript - Angular 2导航到内部锚链接

Question

我正在尝试在 Angular 2 组件中进行深度链接以在设置 URL 参数时打开选项卡。例子：

http://my.project/tabs/2

然后，这将触发我的组件在页面加载时加载选项卡 #2，而不是默认选项卡 #1。

我还需要将当前 URL 更改为http://my.project/tabs/2在页面上单击 Tab #2 的时间。

Answer 1

如果你想使用 URL，你需要router。设置路由后，您可以在组件中使用路由器。假设您有以下路线：

@RouteConfig([
  { path: '/tabs', name: 'Tabs', component: TabsComponent },
  { path: '/tabs/:id', name: 'TabDetails', component: TabDetailsComponent },
])

然后在您的组件中，您可以执行以下操作：

constructor(private _router: Router) {
  // this will handle initial opening, or browser refresh
  let initial: any = this._router.subscribe(route => {
    let tabID = route.replace('tabs/', ''); // or something smarter please (;
    this.openTabs(tabID);
    initial.unsubscribe();
  });
}
openTabs(id) {
  if (!check_if_its_initial) {
    this._router.navigate(['Tabs', 'TabDetails', {id: id}]);
  }
}