Question

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

项目（超级）：

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

ImageItem＆amp; 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

Answer 1

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

一旦组件被注入树中，它就变成了与其他任何组件一样的组件。以下是example如何使用它。

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

1 个答案: