Question

我有一个包含组件的数组（例如）：

this.filters = [ colorFilterComponent, mileageFilterComponent ];

所有过滤器（也称为组件）都代表自己的HTML。什么是动态创建/渲染这些组件的最佳方法？我想在这个数组中维护这些组件。这样我就可以循环遍历所有组件（过滤器）并为每个组件调用函数applyFilters()。（战略设计模式）。

我不认为为每个过滤器指定一个指令是一个不错的解决方案。这样做的最佳方式是什么？

Answer 1

你的意思是，创造它们并摧毁它们？您可以在模板中使用* ngIf。基本上是：

<mileage-filter-component *ngIf="condition">...</mileage-filter-component>

控制Component中的条件状态。 Angular2文档： https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

****更新（见评论）****

您应该查看https://angular.io/docs/ts/latest/api/core/index/ViewChildren-var.html。

您正在寻找的示例是（引自angular.io）：

@Component({   selector: 'child-cmp',   template: '<p>child</p>' }) class ChildCmp {   doSomething() {} } @Component({   selector: 'some-cmp',   template: `
    <child-cmp #child1></child-cmp>
    <child-cmp #child2></child-cmp>
    <child-cmp #child3></child-cmp>   ` }) class SomeCmp {   @ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;   ngAfterViewInit() {
    // children are set
    this.children.toArray().forEach((child)=>child.doSomething());   } }

另请参阅有关angular docs的QueryList和ViewChild主题！</ p>

使用自定义html动态创建组件

1 个答案: