Angular 未定义动态添加组件ViewContainerRef

在Parent Component.ts中

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

在HTML代码中

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content" [innerHTML]="item.value | safeHtml">
    </div>
  </div>
</div>
<ng-template #dynamic></ng-template>

和服务

@Injectable()
export class Service {
    factoryResolver: any;
    rootViewContainer: any;
    constructor(
        @Inject(ComponentFactoryResolver)
        factoryResolver) {
        this.factoryResolver = factoryResolver;
    }
    setRootViewContainerRef(viewContainerRef) {
        this.rootViewContainer = viewContainerRef;
    }
    addDynamicComponent() {
        const factory = this.factoryResolver
            .resolveComponentFactory(JobDashComponent);
        const component = factory
            .create(this.rootViewContainer.parentInjector);
        this.rootViewContainer.insert(component.hostView);
    }
}

---

未定义

viewContainerRef

，因为您用其父标记上的

[innerHTML]

覆盖它

您可以使用此选项，而不是

[innerHTML]

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content">
       {{item.value | safeHtml}}
       <ng-template #dynamic></ng-template>
    </div>
  </div>
</div>

然后，如果对其应用

.toArray（）

，则可以像处理普通数组一样处理它

---

const-array=viewContainerRefList.toArray（）
未定义
viewContainerRef
，因为您在其父标记上用
[innerHTML]
覆盖它

您可以使用此选项，而不是
[innerHTML]

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content">
       {{item.value | safeHtml}}
       <ng-template #dynamic></ng-template>
    </div>
  </div>
</div>

然后，如果对其应用
.toArray（）
，则可以像处理普通数组一样处理它

const-array=viewContainerRefList.toArray（）
您在哪里尝试访问此html编码对应的组件.ts中的
viewContainerRef
？是否也请将其添加到此处？我将仅添加必要的内容此组件取决于您尝试访问
viewContainerRef
的位置。您在哪里尝试访问该组件
viewContainerRef
？在与此html编码对应的component.ts中，是否也请将其添加到此处？我将仅添加必要的内容此组件取决于您尝试访问
viewContainerRef
的位置。例如，ngFor iterate over by Array length=3，但只有第一个元素包含ng模板。为什么没有将此内容添加到数组中的所有元素？您的意思是为什么
@ViewChild（）
只访问第一个
ng模板
？我考虑过它，例如，ngFor iterate by array length=3，但只有第一个元素包含ng模板。为什么没有将此内容添加到数组中的所有元素中？您的意思是为什么只有第一个
ng模板
被
@ViewChild（）
访问？我想了想
<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content">
       {{item.value | safeHtml}}
       <ng-template #dynamic></ng-template>
    </div>
  </div>
</div>

@ViewChildren('dynamic') viewContainerRefList: QueryList<ViewContainerRef>;