私はグリッドコンポーネントと動的に決定された第2コンポーネントを持っています。実行時の制約に基づいて、異なるコンポーネントタイプをAngular2 +で動的に表示する方法は？
スプリッタコンポーネントには、常に上部にグリッドが含まれています。 スプリッタの下部に2次コンポーネントが表示されます。 2次コンポーネントのタイプは、グリッド内の選択された行タイプによって異なります。 行1を選択し、セカンダリコンポーネントが折れ線グラフ 行2を選択し、セカンダリコンポーネントが別のグリッドになる可能性があります。 ユーザーが選択した行を変更すると、コンポーネントと表示されるデータが更新される必要があります。
これを設定する方法に関するアイデアはありますか？
[ngSwitch]ディレクティブで2番目のコンポーネントを動的に読み込むことができます。
あなたがそれらを動的にロードする場合、このようなコード
<div [ngSwitch]="variable">
<app-first *ngSwitchCase="1"></app-first>
<app-second *ngSwitchCase="2"></app-second>
</div>
を構築それはあなたがロードされるべきコンポーネントを決定する方法はあなた次第です。たとえば、変数の値をに変更して、特定のコンポーネントをレンダリングするプレーンJavaScriptのjQueryを使用することができます。行を変更すると、コンポーネントが自動的に更新されます。
第1コンポーネントのデータが第2コンポーネントと一致するようにコンテンツを自動的に更新する場合は、Angular4で提供されるいくつかのクロスコンポーネント通信を使用する必要があります。 良い説明ここでこれを行う方法：https://www.youtube.com/watch?v=I317BhehZKM
ngSwitchがComponentFactoryResolverより優れている点は何ですか？ – reza
私はComponentFactoryResolverを使用して知っているより良いアプローチは、より多くのオブジェクト指向のため、テストと展開が簡単ですが、対処しなければならないいくつかの欠点があります。私はComponentFactoryResolverの経験はあまりありませんでしたが、私の経験から、ngSwitchはあなたのプロジェクトを展開する必要がないことを知っている中小プロジェクトには適しています。 –
'* ngIf' /' [ngSwitch] 'ディレクティブを使用できないのはなぜですか？ –