angular - Angular2 ルーティング: 永続化されたルート タブと子ルート

Question

角度コミュニティ！

現在、AngularJS アプリを Angular 2 に書き直しています。次のように記述できる問題を解決したいと思います: ルート タブ + 子ルート。

したがって、基本的に Angular 2 の Router は非アクティブなコンポーネント (私のタブ!) を破棄します。問題は、私がこの振る舞いを望んでいないことです。理由は、グラフやデータ グリッドなどのコンポーネントがいくつかあり、それらをすばやく切り替えたいため、それらを再作成したくないからです。

ルートを持ちながらタブを永続化するための回避策をいくつか見つけましたが、このアプローチを使用すると、子ルートを実装する方法がわかりません。永続化する必要があるサブタブがさらにあるため、ソリューションの深さに依存しない (つまり、より深いレベルで作業する) ことも望んでいます。

回避策は次のとおりです。いくつかの空のコンポーネントをルートに配置し、[hidden]プロパティでそれらを非表示にするタブを自分でインスタンス化しました。

app.ts:

@Component({ /*...*/ })
@RouteConfig([
    {path: '/**', redirectTo: ['Dashboard']},

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
    {path: '/products/...', name: 'Products', component: EmptyRoute},
    {path: '/sales', name: 'Sales', component: EmptyRoute},
    {path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
    constructor(private router: Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}

app.html:

<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
<sales [hidden]="!isRouteActive(['/Sales'])"></sales>
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>