Dynamische Komponente innerhalb von Modal laden

Question

Ich muss dynamisch eine benutzerdefinierte Komponente in einem Modal laden und es so flexibel wie möglich machen.

Zum Beispiel:

-HTML CODE-

<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> 

-TYPE SCRIPT CODE-

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

Kann mir bitte jemand helfen?

Answer 1

Sie unter Komponenten dynamisch wie,

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

Wenn Sie wollen einige Parameter übergeben können Sie sehen this

hoffe, das hilft schaffen können !!