Загружать динамически компонент внутри модального

Question

Мне нужно динамически загружать пользовательский компонент внутри модального и сделать его максимально гибким.

Например:

HTML код

<button id="floating_button" class="floating_button animation_floating_in" (click)="createNewPost('new_post_form_modal')"><i class="material-icons">gesture</i></button>
      <div class="modal-content" id="loadHere" >
          <!-- LOAD MY CUSTOM COMPONENT HERE  -->
      </div>

КОД СКРИПТА

public createNewPost(nomeComponent:any)
{
    // Load dynamically here nomeComponent inside div with id="loadHere"
}

Может кто-то помочь мне, пожалуйста?

Answer 1

Вы можете создавать компоненты динамически, как показано ниже,

   @Component({
     selector: "parent",
     template: `<button id="floating_button" class="floating_button animation_floating_in" (click)="createNewPost('new_post_form_modal')"><i class="material-icons">gesture</i></button>
  <div class="modal-content" #loadHere >
      <!-- LOAD MY CUSTOM COMPONENT HERE  -->
  </div>`
   })
   export class ParentComponent {
      @ViewChild("loadHere", { read: ViewContainerRef }) childContainer: ViewContainerRef;

    constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}

    createNewPost = (componentName): void => {
       componentToLoad = 'resolve component here using componentName'; 
       this._cr.resolveComponent(componentToLoad ).then(cmpFactory => {               
          this.childContainer.createComponent(cmpFactory);
       });
     }
   }

Если вы хотите передать некоторые параметры, вы можете увидеть это

Надеюсь это поможет!!