更新动态组件加载器的问题答案

【问题标题】：Issue with updating dynamic component loader更新动态组件加载器的问题
【发布时间】：2016-08-29 15:52:36
【问题描述】：

在我的 ModalComponent 中，我有以下内容：

_eventEmitterService.modal.subscribe(stream=>{
    var component = ModalTemplateComponent;
    stream.subscribe(msg=>{
        this.componentRef.dispose();
        this.componentRef = null;
    });
    this._dcl.loadIntoLocation(component,_elementRef, 'modal').then((componentRef)=>{
       this.componentRef = componentRef;
    });
})

在我更新到 Angular 17 之前效果很好。

在更新日志中，我读到：

DynamicComponentLoader.loadIntoLocation 已被删除。采用 @ViewChild('myVar', read: ViewContainerRef) 来获取一个 ViewContainerRef 在具有变量 myVar 的元素上。然后打电话 DynamicComponentLoader.loadNextToLocation

所以，据我所知，我需要补充：

@ViewChild('selector-modal') child:ModalComponent;

到持有 ModalComponent 的组件。

但是，我不太确定应该如何在 ModalComponent 中加载我的新组件：

 this._dcl.loadIntoLocation(component,_elementRef, 'modal').then((componentRef)=>{
       this.componentRef = componentRef;
    });

在过去的 angular-16 版本中 this 的等价物是什么？

【问题讨论】：

标签： angular

【解决方案1】：

@ViewChild() 应该有read 参数集：

@ViewChild('selector-modal', {read: ViewContainerRef}) child:ModalComponent;

加载 nextToLocation 应该如下所示：

this._dcl.loadNextToLocation(component, this.child).then((cmpRef) => {
  this.cmpRef = cmpRef;
});

另见Angular 2 dynamic tabs with user-click chosen components

【讨论】：

这似乎是正确的答案，但是，在我的情况下 this.child 是未定义的。知道为什么会发生这种情况吗？
您的模板中可能没有#selector-modaltemplate 变量。