2016-01-21 74 views
1

我正在尝试在Angular 2组件中进行深度链接,以便在设置URL参数时打开一个选项卡。例如:Angular 2导航到内部锚链接

http://my.project/tabs/2

这将随后触发我组件加载标签#2在页加载而不是1的默认选项卡#。

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

回答

2

如果你想使用网址,你需要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}]); 
    } 
} 
+0

我张贴在此之后我解决路由问题,但是从你的答案不同我用的构造(params:RouteParams){var test = params.get('id'); } 方法。这似乎比通过字符串操作获取数据要好。有没有你没有使用params.get()的原因? – AJStacy

+1

@AJStacy TBH,当时没有想过。在我的代码中有这样的东西(在那里没有params ...),所以我认为它可以为你工作。但正如我在评论中所说 - 我很高兴你做了'更聪明的东西'(: – Sasxa