ナビゲート可能なツリー (左側) と隣接する詳細ペイン (右側) を持つ Angular 2 アプリケーションを構築しています。
ツリーのどのノードが選択されているかに応じて、同じ詳細領域に約 20 ～ 30 の異なるコンポーネントをレンダリングしたいと考えています。
多くのコンポーネントを同じものに送信するにRouterOutletは、アウトレットが定義されている同じ親コンポーネントにすべてのコンポーネントをロードする必要があるようです。そのようなモノリシックなトップレベルのコンポーネントを持ちたくないのです。
それが明確でない場合は、この残りの部分で私のシナリオをより詳細に説明し、最後に同じ質問をもう一度述べます。
ツリーでは、一度に 1 つのノードしか選択できません。ノードが選択されると、他のすべての非親ノードが閉じられ、選択されたノードの子のリストがネットワーク経由でロードされ、選択されたノードの下に表示されます。選択したノードに関連する詳細情報もネットワーク経由でロードされ、以前にそこに表示されていた他の情報を置き換えて、右側の共有ペイン領域に表示されます。
異なるノードは異なるアプリケーション機能を表し、異なるエンティティ タイプを含みます。したがって、ツリーのさまざまなノードには次の両方が必要です。
- 子ツリーを展開するためのさまざまな子テンプレート/コンポーネント (一部のツリー ノードには連絡先の名前が列挙され、他には予定が含まれます)。
- 詳細ペインにロードされたさまざまなテンプレート/コンポーネント
次に例を示します。
- 予定
- ジョー午前11時
- スー 12am
- 人
- ジョー・スミス
- スー・リー(選択)
- 3日前
- 5日前
詳細パネルには、Sue Li に関する情報が表示されます。
現在、プライマリ ルートを使用してツリーを運用しています。CanActivateRoutable Component をレンダリングする前に、子ノードのデータが解決されるのを待つために呼び出します。次に、DOM を操作して、ノードがレンダリングされた直後にツリーに移植します。ツリーは単独で機能します。アプリケーションのメインの URL ナビゲーションがルート ツリーによって期待どおりに駆動される点が気に入っています。別の提案を歓迎しますが。
Aux ルートを使用して、正しい詳細ペイン テンプレートを表示しようとしています。関連するツリー ノードは、単純な Aux ルートを使用して正しい詳細ペインを「開始」する方法を理解しています。ただし、次の 2 つの問題があります。
Aux ルートは をサポートしていないため、Angular 2 でデコレータが利用可能に
CanActivateなるまで、@Resolveデータが解決されるまで Aux コンポーネントのレンダリングを簡単に遅らせることはできません。これは、Angular リリースで修正されるため、優先度の低い問題です。詳細な Aux コンポーネントはすべて 1 つの親コンポーネントにロードする必要があるため、それぞれが同じ親 Aux を上書きできます
RouterOutlet。このような大規模な最上位コンポーネントを必要としない、これを行う別の方法はありますか?