Question

在我的项目中，我希望动态插入组件作为父容器的子项。这是代码

import { Component, ViewContainerRef, ComponentFactoryResolver, ViewChild } from '@angular/core';

@Component({
  selector: 'parent',
  template: `
  <ng-container>
  <child1></child1>
<button (click)="me()">me</button>
  </ng-container>

  `
})
export class ParentComponent {

  componentRef:any;

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

  me() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(Child2Component);
    this.componentRef = this.viewContainerRef.createComponent(factory);
    // this.componentRef._component.role = role;
    this.componentRef.changeDetectorRef.detectChanges();
  }
}

在上面的代码中，parent组件默认包含child1组件。有一个按钮可以插入另一个组件（child2）。但是这是作为父组件的兄弟插入的。

<parent>
  <child1></child1>
</parent>
<child2></child2>

我想将其作为父组件的子项插入。

<parent>
  <child1></child1>
  <child2></child2>
</parent>

Answer 1

动态组件始终作为ViewContainerRef的兄弟添加。如果你想把它作为孩子，添加一个子元素并获取这个元素的ViewContainerRef，使动态组件成为这个元素的兄弟。

Answer 2

您可以为容器添加选择器

<ng-container #selector> // <-- add selector tag here
  <child1></child1>
  <button (click)="me()">me</button>
</ng-container>

然后您可以将其用作字段而不是ViewContainerRef

@ViewChild('selector', {read: ViewContainerRef}) selector;

this.componentRef = this.selector.createComponent(factory);

在DOM angular2中插入动态组件作为容器的子组件

2 个答案: