文字列名で表示するコンポーネントを決定します。

Question

異なるタイプのオブジェクトがいくつかある場合。すべてのオブジェクトには独自のコンポーネントがあります。たとえば、私はtypeA, typeB, typeCを持っていて、すべての型に対して独自のコンポーネントtypeAComponent, typeBComponent, typeCComponentを持っています。

現在、私は大きなngSwitchを持っている：

<div [ngSwitch]="variant.type"> 
      <div *ngSwitchCase="'typeA'"> 
       <typeAComponent></typeAComponent> 
      </div> 
      <div *ngSwitchCase="'typeB'"> 
       <typeBComponent></typeBComponent> 
      </div> 
      <div *ngSwitchCase="'typeC'"> 
       <typeCComponent></typeCComponent> 
      </div> 
    </div> 

は、このスイッチケースを回避するためのいずれかの可能性はありますか？

variant.typeには、コンポーネントのタイプが含まれています。したがって、おそらく `< {{variant.type + 'Component}}}>

のようなものを定義することが可能です。

どうしたらいいですか？将来のバージョンでは、追加のタイプがあります。その考え方は、typeXComponentだけを書かなければならず、他のコードを変更する必要がないということです。 （現在、私は、スイッチケースに新しいケースを追加する必要があります。）あなたが唯一の文字列として、私は角度のために必要な同様の

$myClassName = 'myClass'; 
$instance = new $myClassName(); 

何かをクラス名を知ることにより、クラスをインスタンス化することができますPHPで

：D

ヒントはありますか？

Answer 1

ComponentType not stringクラスを使用して動的にコンポーネントを読み込むことができます。 NameクラスとComponentTypeクラスを持つディクショナリを作成して、コンポーネントを動的に読み込むことができます。あなたが他のコンポーネントをロードしているコンポーネントで

動的

//inject the component factory resolver 
    constructor(private componentFactoryResolver:ComponentFactoryResolver){} 

    //accept a component and a viewContainerRef (where you want to load the component) 
    loadComponent(component:Type, target:ViewContainerRef){   
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component); 
     target.createComponent(componentFactory); 
    } 

・ホープ、このことができます！