Angular 2导航到内部锚链接答案

【问题标题】：Angular 2 Navigate to Internal Anchor LinkAngular 2导航到内部锚链接
【发布时间】：2016-01-21 15:55:17
【问题描述】：

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

http://my.project/tabs/2

这将触发我的组件在页面加载时加载标签 #2，而不是默认标签 #1。

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

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案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}]);
  }
}

【讨论】：

发布此内容后，我解决了路由问题，但与您的回答不同，我使用了构造函数(params: RouteParams) { var test = params.get('id'); } 方法。这似乎比通过字符串操作来获取数据要好。你没有使用 params.get() 有什么原因吗？
@AJStacy TBH，当时没有考虑。在我的代码中有这样的东西（那里没有参数......），所以我认为它可以为你工作。但正如我在评论中所说 - 我很高兴你做了“更聪明的事情”（：