Angular 在运行时创建组件并需要向其添加数据

Question

我正在使用 Angular 7/8，我有一些代码添加了一个新组件，所以在父组件中我有：

父组件

在我的 .ts 文件中：

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor (private componentFactoryResolver: ComponentFactoryResolver) {}


  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.createComponent(componentFactory);
  }

在 .html 我有：

<button (click)="addComponent()">Add Component</button>

我还有一个指令：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) {}

}

最后是子组件：

子组件：

然后在子组件中我有：

  export class ChildComponent implements OnInit {

  @ViewChild('viewer') private viewer: ElementRef;

}

并且在 html 中只是：

<div>I AM A COMPONENT</div>

我想做的是给创建的子组件传递数据，让每个子组件都有自己的数据。

我该怎么做：

Answer 1

您可以使用 viewContainerRef.createComponent(componentFactory);

返回的 ComponentRef 的 instance 属性

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const compRef = viewContainerRef.createComponent(componentFactory);
    compRef.instance.someProperty = "some data";
  }

这是一个工作演示 https://stackblitz.com/edit/angular-lusfbj

Angular 在运行时创建组件并需要向其添加数据

Angular Creating component at runtime and need to add data to it

angular

typescript

angular7

angular8