创建组件并附加到 div答案

【问题标题】：Create component and append to div创建组件并附加到 div
【发布时间】：2019-08-22 04:00:18
【问题描述】：

我有一个带有指令[appComponent] 的<div>，所以我可以创建一个组件并附加到它。

<div [appComponent]="component">

我的指令如下：

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;
  private container;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.container = this.elementRef.nativeElement;
  }

  ngOnChanges(changes: SimpleChanges): void {
    const newComponent = this.renderer.createElement('new-component');
    this.renderer.appendChild(this.container, newComponent);
  }
}

还有我的new-component：

@Component({
  selector: 'new-component',
  templateUrl: './new-component.html',
  styleUrls: ['./new-component.scss']
})
export class NewComponent {
}

这个组件里面有内容。该元素已创建并附加到 div，但是它是空的：

<div>
    <new-component _ngcontent-c3=""></new-component>
</div>

如何实例化一个组件并将其附加到 div 中？我正在使用角度 7。

【问题讨论】：

您的预期输出是什么？请简要介绍一下new-component.html...
new-component.html 只包含一个文本...它是<div>Test</div>

标签： angular angularjs-directive

【解决方案1】：

尝试使用ViewContainerRef 和ComponentFactoryResolver，

let componentFactory = 
    this.componentFactoryResolver.resolveComponentFactory(NewComponent);
let componentInstance = 
    this.viewContainerRef.createComponent(componentFactory);
this.renderer.appendChild(this.container, 
    componentInstance.location.nativeElement);

【讨论】：

如何将其附加到<div>？
使用componentInstance在container内渲染

【解决方案2】：

您不需要ElementRef 或Renderer2。

试试这个：

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(NewComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.viewContainerRef.insert(componentRef.hostView);
  }
}

要提到的重要一点是，要完成这项工作，您必须将NewComponent 添加到entryComponents，如下所示：

@NgModule({
  imports [...],
  entryComponents: [NewComponent],
  declarations: [NewComponent, ComponentDirective, ...],
  bootstrap: [...]
})
export class AppModule { }

这是一个工作示例：https://stackblitz.com/edit/angular-dbszef

【讨论】：