状態を保持するAureliaでナビゲート可能なタブを実現するには？シナリオに続き

Question

：

タブが来て、行くことができます。私が理解しようとしている私の現在のアイデアは、各タブに対して<router-view>を持つことです。 A name d <router-view>が正確です。タブを追加する必要がある場合、対応する<router-view>の名前に設定されたviewPortsプロパティを持つルートを動的に追加する必要があります。 現在開いているタブに応じて、<router-view>を表示または非表示にします。

これは機能しますか？何か不足していますか？ これを実装する他の/より良いアプローチがありますか、または例へのリンクを提供できますか？

Answer 1

これは、子ルータを使用すると、よりクリーンな方法で行うことができます。あなたの親コンポーネントのTS /のJSファイルにこのような子ルータを設定することができます。

configureRouter(config: RouterConfiguration, router: Router){ 
    config.map([ 
     { route: 'tab-1', name: 'tab-1', moduleId: 'tab-1/tab-1', nav: 'true', title: 'Tab 1' }, 
     { route: 'tab-2', name: 'tab-1', moduleId: 'tab-2/tab-2', nav: 'true', title: 'Tab 2' }, 
     { route: 'tab-3', name: 'tab-3', moduleId: 'tab-3/tab-3', nav: 'true', title: 'Tab 3' } 
    ) 
} 

を私は「タブ - *」それらの名前上記のコードでは、すべてのタブカスタム要素を確認します。

あなたはその後、先に行くと、あなたのタブ付きナビゲーションのための新しいコンポーネントを作成することができます

（あなたは常に親コンポーネントにナビゲーションロジックを置くことができますが、私はきれいになるこのアプローチを見つけ、モードモジュラー及び再利用可能）

tabnav .TS

import {bindable} from 'aurelia-framework'; 
import {Router} from 'aurelia-router'; 

export class TabnavCustomElement{ 
    @bindable router: Router; 
} 

tabnav.html

<template> 
<ul> 
    <li repeat.for="navItm of router.navigation"> 
     <a href.bind="navItm.href" class="nav-link ${navItm.isActive ? 'active' : ''}">${navItm.title}</a> 
    </li> 
</ul> 

ザ・あなたがparent.htmlに移動し、このようにそれを含めることができます。

<tabnav router.bind="router"></tabnav> 
<router-view></router-view> 

<router-view>は、タブあなたがクリックして、その内容に応じて変化します。タブ間で状態を共有したい場合は、3つのカスタム要素のそれぞれに注入できる共有サービスを作成することができます。

また、新しいタブを追加するたびに、そのタブの新しいカスタム要素を作成してルータに配置するだけです。