Angular 2根據模型在視圖中嵌入子組件

Question

如何根據模型（用飛鏢編寫）創建包含其他組件的新組件（視圖）？包含的組件列表

@Component(selector: 'image-item') 
@View(template: ''' 
    <div> 
    <img src="http://localhost:8082/images/test.png"/> 
    </div>''') 

class ImageItem extends Item { 
    String selector = 'image-item'; 
    ImageItem() : super() {} 
} 

@Component(selector: 'button-item') 
@View(template: ''' 
    <div> 
    <button type="button"/> 
    </div>''') 
class ButtonItem extends Item { 
    String selector = 'button-item'; 
    ButtonItem() : super() {} 
} 

簡單的組件/型號：

@Component(selector: 'app') 
@View(
templateUrl: 'app.html', 
directives: const [Item, ImageItem, ButtonItem, NgFor, NgSwitch, NgSwitchDefault, NgSwitchWhen]) 
class App { 
    List<Item> items = [new ButtonItem(), new ImageItem(), new ImageItem()]; 
} 

項目（超類）：

@Component(selector: 'item') 
@View(template: '<div/>') 
class Item {} 

的ImageItem & ButtonItem（子類）現在我想根據項目列表創建app.html視圖。使用NgSwitch有更好的解決方案嗎？

<div> 
    <ul> 
     <li *ng-for="#item of items; #i = index" > 
      <div [ng-switch]="item[i].selector"> 
      <template ng-switch-when="button-item"> 
       <button-item>{{item.selector}}</button-item> 
      </template> 
      <template ng-switch-when="image-item"> 
       <image-item>{{item.selector}}</image-item> 
      </template> 
      </div> 
     </li> 
    </ul> 
</div> 
--> does not work, don't know why 

Answer 1

這是一個用於DynamicComponentLoader的用例，它允許在組件樹中動態注入組件。

一旦組件被注入到樹中，它就變成了與其他組件一樣的組件。這是關於如何使用它的example。