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

您可以使用instance返回的ComponentRef的{{1}}属性

viewContainerRef.createComponent(componentFactory);

这是一个有效的演示https://stackblitz.com/edit/angular-lusfbj

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

1 个答案: