Question

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

http://my.project/tabs/2

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

我还需要在页面上点击标签＃2时将当前网址更改为http://my.project/tabs/2。

Answer 1

如果您想使用网址，则需要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}]);
  }
}

Angular 2导航到内部锚点链接

1 个答案: