javascript - Angular 2 内部アンカー リンクに移動する

Question

URL パラメーターが設定されているときにタブを開くために、Angular 2 コンポーネントでディープリンクを実行しようとしています。例：

http://my.project/tabs/2

これにより、デフォルトのタブ #1 ではなく、ページの読み込み時にコンポーネントがタブ #2 を読み込むようになります。

http://my.project/tabs/2また、ページ上でタブ #2 がクリックされたときに、現在の URL を変更する必要があります。

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}]);
  }
}