Angular 2：根据模型嵌入子组件到视图中

Question

如何创建一个新的组件（视图），它根据 Dart 写的模型包含其他组件？

项（超类）：

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

ImageItem和ButtonItem（子类）：

@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()];
}

现在我想根据项目列表创建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

- Thomas Frick

---

不！那几乎是最好的方法了。 - unobf

也面临着这个问题，进行了调查。确实必须使用开关语句。 - Alexander Ermolov

Answer 1

这是一个使用DynamicComponentLoader的实例，它允许在组件树中动态注入组件。

一旦组件被注入到树中，它就像任何其他组件一样。这里有一个示例说明如何使用它。

- Angular University

---

我如何将父组件的数据绑定到使用DynamicComponentLoader插入的子组件中？ - Alex Barannikov

警告：动态组件加载器现已弃用。根据文档：请改用 ComponentResolver 和 ViewContainerRef。 - Clément Flodrops

有没有ComponentResolver和ViewContainerRef的示例？ - Karthick