2 - ランタイム中にコンポーネントをインポート/インジェクトする方法

Question

製品のビューが2つあり、ユーザーの好みに基づいてこれらのビューの1つを表示したいとします。

私は2つのビューを持つことを考えています<my-product>は2つの異なるフォルダに管理されており、ユーザーがログインした後、ユーザーがその製品をどのように表示するかに基づいてフォルダからインポートします。

Folder 1 
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product> 
Folder 2 
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product> 
App 
----App.Component // here I would like to import the component at runtime from either folder 1/2 based on user preferences 

これについての洞察をお寄せください。これがコンポーネントレベル（例：ルーティングレベル）で達成できない場合は、代替手段がありますか？

Answer 1

なぜユーザーの好みに基づいてスワップする2つの要素に* ngIfを持たないのはなぜですか？

<my-product1 *ngIf="userPref1"></my-product1> 
<my-product2 *ngIf="!userPref1"></my-product2> 

ここで、userPref1は、ユーザー入力によって設定されるApp.Componentにある変数（または関数）です。

ユーザーは自分の好みを指定することができ、アプリケーションは入力に基づいてビューをスワップし、実行時にインポートする必要はなくなりました。

Answer 2

ユーザーの嗜好に基づいて[ngSwitch]を使用し、その特定のコンポーネントを*ngSwitchCaseにロードする必要があります。実際には、コンポーネントを怠っているわけではありません。それらはすべてプリロードされていますが、AngularのDOM操作メソッドを使用して、1つのコンポーネントまたは他のコンポーネントを表示または非表示にします。例えば

：ユーザが自分の好みを変更するとき

<div [ngSwitch]="someUserPreference"> 
    <div *ngSwitchCase="grid"> 
     <my-grid-list></my-grid-list> 
    </div> 
    <div *ngSwitchCase="card"> 
     <my-card-view-grid></my-card-view-grid> 
    </div> 
    <div *ngSwitchDefault> 
     <!-- Incorrect preference, let's show grid as a fallback --> 
     <my-grid-list></my-grid-list> 
    </div> 
</div> 

は基本的に、これはコードに反映されます。ボタン、ラジオボタンなどを使用して設定を変更するか、switch文で使用される変数またはプロパティの値をsomeUserPreferenceに保存する必要があります。