web-dev-qa-db-ja.com

Angular2（TypeScript）での動的ルーティングの実装

ルーティング機能でコンポーネント（@RouteConfig）を装飾するために使用できるRouteConfigクラスには、そのコンポーネントに対して定義された特定のルート定義があります。ここでの問題は、これらのルート定義を実行時に（動的に）注入することです。

その理由は、アプリケーションが読み込まれているアカウントに対応する「n」個のルートを表示（UI）して定義（装飾）する必要があるアプリケーションがあり、その結果、関連付けられている権限があるとしましょうその特定のアカウント。したがって、コンポーネントのデコレータ@RouteConfigでルート定義を事前に定義しても意味がありません。

私のアプローチは、新しいアカウントが読み込まれるたびにサービスコールを行うことです。また、関連付けられたルートのみを取得し、実行時に注入して、そのアカウントのUIに表示されている各ルートに対応する他のそれぞれのコンポーネントに移動します。

import { Summary } from './components/summary';

@RouteConfig([
  /*
    Let's say we need a seller dashboard to be displayed...
  */
  //{ path: 'SellerDashboard', component: SellerDashboard }
  { path: '/', component: Summary }
])
class App {
    contactInfo: ContactInfoModel;
    public App(dataService: DataService) {
        this.model = dataService.getContactInfo();
    }
}

上記のコードスニペットで、アプリケーションに略奪されたセラーアカウントに対応するセラーダッシュボードをロードしたいとします。これで、POSダッシュボードや、売り手に関係のないもの（この場合、売り手の在庫ダッシュボードは売り手に関連しています）を表示しても意味がありません。

Gistでは、すべてのルートを同じ場所で構成するのではなく、必要なルートのみを注入します。

編集1：

この質問には、この投稿でマークされた重複（後で尋ねられた）よりも単純な使用例またはシナリオがあります。この投稿で述べられている答えはより単純なアプローチであり、はるかに直感的でもあります。

typescriptangularangularjs-routingangular2-routingangular2-template
9
darkdefender27

この投稿を確認してください：

http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

基本的に作成者は、Reflect APIを使用して@RouteConfigデコレーターに動的にルートを追加するクラスDynamicRouteConfiguratorを作成します。

Githubリンク：

https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts

7
Ma Jerez