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

Question

In my ModalComponent, I have the following:

_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;
    });
})

which worked very well, until I've updated to Angular 17.

In the changelog, I've read that:

DynamicComponentLoader.loadIntoLocation has been removed. Use @ViewChild('myVar', read: ViewContainerRef) to get hold of a ViewContainerRef at an element with variable myVar. Then call DynamicComponentLoader.loadNextToLocation

So, as I understand, I need to add:

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

to component that hold the ModalComponent.

However, I am not quite sure how I should then load my new component in the ModalComponent :

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

What is the equivalent this in past angular-16 version?

Answer 1

@ViewChild() should have the read parameter set:

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

And load nextToLocation should look like:

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

See also Angular 2 dynamic tabs with user-click chosen components