Question

我想动态创建几个组件，其中一些组件可能稍后被删除。最后，我想对仍然存在的所有组件执行操作。

要创建的示例组件：

class MyComponent {
  ...
  getData(){
    return this.data;
  }
}

示例父类

class MyClass { 
   @ViewChild('myContainer', { read: ViewContainerRef })
   myContainer: ViewContainerRef;

   createComponent(){
     const factory = this.resolver.resolveComponentFactory(MyComponent);
     const componentRef = this.myContainer.createComponent(factory);
   }
}

我尝试在组件上调用方法

const elementCount = this.myContainer.length;
for (let i = 0; i < elementCount; i++) {
  console.log(myContainer.get(i).getData());
}`

显然，这不会起作用，因为get会返回viewRef，而不是实际的组件。

我想要一种访问组件的方法，或使用Rx的解决方案，它将提供一种方法来访问仍然存在的组件的所有数据。

Answer 1

您可以从createComponent方法返回ComponentRef：

class MyClass 
{ 
    @ViewChild('myContainer', { read: ViewContainerRef })
    myContainer: ViewContainerRef;
    children: ComponentRef<MyComponent>[] = [];

    createComponent(){
      const factory = this.resolver.resolveComponentFactory(MyComponent);     
      return this.myContainer.createComponent(factory);
    }
}

每当您创建动态子组件时，将其添加到父组件中的数组或某种字典：

children.push( this.createComponent() );

要访问动态组件，您将遍历ComponentRefs：

const elementCount = children.length;
for (let i = 0; i < elementCount; i++) {
  console.log(children[i].getData());
}

您当然还需要跟踪动态组件何时被销毁或不再需要，具体取决于您的应用程序逻辑 - 从ComponentRef集合中查找和删除它们。

此外，您可能希望在不再需要它们时销毁所有ComponentRef。

Angular 4动态创建组件，然后检索已创建组件的列表

1 个答案: