Angular2：将动态组件作为容器的子元素插入 DOM

Question

有没有办法在 Angular 2 中动态插入一个组件作为 DOM 标签的 child（不是兄弟）？

有很多例子可以插入动态组件作为给定ViewContainerRef 标记的兄弟，例如（从 RC3 开始）：

@Component({
  selector: '...',
  template: '<div #placeholder></div>'
})
export class SomeComponent {
  @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;

  constructor(private componentResolver: ComponentResolver) {}

  ngAfterViewInit() {
    this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) => {
        this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

但这会生成一个类似于：

<div></div>
<my-dynamic-component></my-dynamic-component>

预期结果：

<div>
    <my-dynamic-component></my-dynamic-component>
</div>

使用SomeComponent 的ViewContainerRef 有相同的结果，它仍然将生成的组件作为兄弟插入，而不是子组件。如果模板为空并且在模板中插入动态组件（在组件选择器标记内），我可以接受。

在使用 ng2-dragula 等库从动态组件列表和benefit from the model updates 中拖动时，DOM 结构非常重要。额外的 div 在可拖动元素列表中，但在模型之外，破坏了拖放逻辑。

有人说这是不可能的 (c.f. this comment)，但这听起来像是一个非常令人惊讶的限制。

Answer 1

TL;DR：将 <div #placeholder></div> 替换为 <div><ng-template #placeholder></ng-template></div> 以插入到 div 中。

这里是working stackblitz example（Angular 6），以及相关代码：

@Component({
  selector: 'my-app',
  template: `<div><ng-template #container></ng-template></div>`
})
export class AppComponent implements OnInit {

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

    constructor(private compiler: Compiler) {}

    ngOnInit() {
      this.createComponentFactory(MyDynamicComponent).then(
        (factory: ComponentFactory<MyDynamicComponent>) => this.viewContainer.createComponent(factory),
        (err: any) => console.error(err));
    }

    private createComponentFactory(/*...*/) {/*...*/}

}

似乎<ng-container #placeholder></ng-container> 也在工作（将ng-template 替换为ng-container）。我喜欢这种方法，因为<ng-container> 显然是针对这个用例（一个不添加标签的容器），并且可以在其他情况下使用，例如NgIf，而无需包装在真正的标签中。

---

PS：@GünterZöchbauer 在评论中指导我进行正确的讨论，我终于回答了我自己的问题。

---

编辑 [2018-05-30]：更新为 stackblitz 链接以提供一个有效的最新示例。

Answer 2

我正在寻找相同问题的解决方案，但批准的答案对我不起作用。 但是我找到了更好和更合乎逻辑的解决方案，如何将动态创建的组件作为子元素附加到当前宿主元素。

想法是使用新创建的组件的元素引用，并通过渲染服务将其附加到当前元素引用。 我们可以通过它的注入器属性来获取组件对象。

代码如下：

@Directive({
    selector: '[mydirective]'
})
export class MyDirectiveDirective {
    constructor(
        private cfResolver: ComponentFactoryResolver,
        public vcRef: ViewContainerRef,
        private renderer: Renderer2
    ) {}

    public appendComponent() {
        const factory = 
        this.cfResolver.resolveComponentFactory(MyDynamicComponent);
        const componentRef = this.vcRef.createComponent(factory);
        this.renderer.appendChild(
           this.vcRef.element.nativeElement,
           componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
        );
    }
}

Answer 3

我的肮脏方式，只是保存动态创建的组件（兄弟）的引用并使用 vanilla JS 移动它：

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

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      MyDynamicComponent,
    );
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.el.nativeElement.appendChild(componentRef.location.nativeElement);
  }

Answer 4

我的解决方案与@Bohdan Khodakivskyi 非常相似。但是我尝试了Renderer2。

  constructor(
    private el: ElementRef,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver,
    private render: Renderer2
  ) {}

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      MyDynamicComponent,
    );
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.render.appendChild(this.el.nativeElement, componentRef.location.nativeElement)
  }

Answer 5

现在可以通过@angular/cdk 中的Portal 获得更简单的方法。

npm i @angular/cdk

app.module.ts:

import { PortalModule } from '@angular/cdk/portal';

@NgModule({
  imports: [PortalModule],
  entryComponents: [MyDynamicComponent]
})

一些组件：

@Component({
  selector: 'some-component',
  template: `<ng-template [cdkPortalOutlet]="myPortal"></ng-template>`
})
export class SomeComponent {
  ...
  this.myPortal = new ComponentPortal(MyDynamicComponent);
}

Answer 6

@Magicaner 的This answer 帮助了我，但缺少一些细节以使其正常工作。

总之，是的，您可以使用Renderer2.appendChild 添加新的子组件。该指令如下所示：

@Directive({
    selector: '[myDynamicDirective]'
})
export class MyDynamicDirective implements OnInit {
    constructor(
        private cfResolver: ComponentFactoryResolver,
        public vcRef: ViewContainerRef,
        private renderer: Renderer2
    ) { }

    ngOnInit() {
      this.appendComponent();
    }

    public appendComponent() {
        const factory =  this.cfResolver.resolveComponentFactory(MyDynamicComponent);
        const componentRef = this.vcRef.createComponent(factory);
        this.renderer.appendChild(
           this.vcRef.element.nativeElement,
           componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
        );
    }
}

它将MyDynamicComponent 的一个新实例添加为一个孩子。要从该动态组件获取elRef 以发送到appendChild，您可以在组件定义中执行此操作：

@Component({
  selector: 'my-dynamic-component',
  template: '...'
})
export class MyDynamicComponent {
  constructor(public elRef: ElementRef) { }
}

而且你还需要在模块中将动态组件添加到entryComponents，当然还有将指令和动态组件添加到模块declarations。

工作堆栈闪电战here