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

Question

如何根据模型（用 dart 编写）创建包含其他组件的新组件（视图）？

项目（超级class）：

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

ImageItem 和 ButtonItem（子 classes）：

@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/model：

@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

Answer 1

这是 DynamicComponentLoader 的用例，允许在组件树中动态注入组件。

一旦组件被注入到树中，它就会像其他任何组件一样变成一个组件。这是如何使用它的 example。

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

Angular 2 Embed sub components in a View depending on a model

dart

angular