この時点で、より動的なアプリケーションを作成するのに非常に役立つ動的コンポーネントについてすでに聞いたことがあるかもしれません。これらを使用すると、ngIfの負荷で肥大化するコンポーネントを作成しなくても、カスタムロジックに応じて実行時にコンポーネントを動的にロードできます。

ダイナミックコンポーネントについてまだ聞いたことがない場合は、AngularConnectのShmuelaJacobsからのこの講演をご覧になることをお勧めします。

私の日常業務では、CRMのようなシステムを構築しており、さまざまな製品を管理しています。これらの製品はすべて共通のコア部分を持っていますが、製品固有のものもあります。コンポーネントをより再利用可能にするために、現在アクティブな製品を指定するInjectionTokenに応じて、正しい製品固有のコンポーネントをロードする動的コンポーネントをあちこちに導入しました。いくつかの一般的なステップだけでなく、いくつかの製品固有のステップも含むステップフローをリファクタリングしようとするまで、すべてが素晴らしく良かったです。ステップフローはコンポーネントベースであるだけでなく、ルートにも依存しているため、これは問題でした。つまり、製品のステップフローには、他のステップとは異なるいくつかの追加のステップ、つまりルートが含まれる可能性があります。ステップ数も変わる可能性があります。

汚い回避策は、step1、step2、step3という名前の固定数のルートを作成し、各ステップでコンポーネントを動的にロードすることですが、ステップ数が異なるため、これは不可能です。適切な解決策は、動的ルーティングを使用することです。

通常、次のようなルーティングモジュールでモジュールのルートを非常に静的に定義します。

モジュールがロードされると、ルートの静的割り当てに干渉する可能性のあるロジックがなくなるため、常にホームルートのみが存在します。

例

あまり意味がないかもしれないが、動的ルーティングがどのように機能するかを示すことを目的とした非常に単純化された例を見てみましょう。

次のルートでアプリケーションを作成します。

• ホーム（静的）
• 404見つかりません（静的）
• 日（動的。午前6時から午後6時までのみ利用可能）
• 夜（ダイナミック。午後6時から午前6時までのみご利用いただけます）
• シークレット（ダイナミック; 50/50チャンス）

プロバイダーセクションでルートを定義したので、useFactoryプロバイダー定義オブジェクトを利用できます。そうすれば、ルートがどのように見えるかを決定するロジックを含むファクトリを渡すことができます。

簡単なリマインダー：モジュールを午前5:59にロードし、午前6:01まで待つと、ルート構成が既に行われているため、日ルートは使用できなくなります。これは、ルートを定義するロジックが、モジュールがロードされたときに1回だけ発生することを意味します。

結論

何か新しくて面白いものをお見せできればと思います。Angularに興味がある場合は、Mediumに関する他のブログ投稿を確認してください。

完全な例は私のGitHubで入手できます：