angularjs - 如何定义注入(inject)动态成分的位置？

我的部件注入了动力。但是，如何定义没有任何包装的地方呢？

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

  constructor(
    private apiService: ApiService,
    private viewContainerRef: ViewContainerRef,
    private componentResolver: ComponentResolver) {
  }

  create() {
    this.componentResolver.resolveComponent(PieChart).then((factory) => {
      this.viewContainerRef.createComponent(factory);
    });
  }

我想把它们注射到某个地方。

<div class="someClass">
<!--How inject them here?  -->
</div>

最佳答案

有两种方法：
注入问题中的ViewContainerRef，然后在此组件下面添加新组件
使用components模板中的target元素和模板变量（如<div #target></div>和@ViewChild('target', {read: ViewContainerRef}) viewContainerRef:ViewContainerRef;）来获取这个ViewContainerRef的<div>。添加的元素再次添加到下面<div>
createComponent()允许传递索引。默认情况下，新组件总是在末尾添加，但如果传递索引，则插入该位置。
（未测试）使用index0您应该能够在目标元素之前添加新元素。
如果在同一个ViewContainerRef中添加多个组件，则可以在较早添加元素之前通过索引插入新组件。