Best practice für den Aufruf der NgbModal open-Methode

Gespielt mit der NgbModal und auslösen möchten die open-Methode -> open(content: string | TemplateRef<any>, options: NgbModalOptions) <- von irgendwo anders als der template-code. In meinem Fall möchte ich eine Zeichenfolge übergeben, die als parameter bei der Ausführung der Methode in der .ts Datei von meiner Komponente. Bei der Ausführung der Methode über einen button in der html-Datei, etwa so: <button (click)="open(content)">Launch demo modal</button>, der code funktioniert Super, natürlich mit all den code innerhalb der <template></template> in der html-Datei.

Versuchen, etwas zu erreichen mit diesem:

logoutScreenOptions: NgbModalOptions = {
    backdrop: 'static',
    keyboard: false
};

lockedWindow: NgbModalRef;

lockedScreenContent= `
    <template #content let-c="close" let-d="dismiss">
        <div class="modal-header" style="text-align: center">
            <h3 class="modal-title">Title</h3>
        </div>
        <div class="modal-body">
            <p>Body</p>
        </div>
        <div class="modal-footer">
            <p>Footer</p>
        </div>
    </template>
`;

openLockedScreen(){
    this.open(this.lockedScreenContent);
}

open(content) {
    console.log(content);
    this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions);
    this.lockedWindow.result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

Code ohne Fehler ausgeführt wird, und das modal öffnet, etwa so:
Modal, ohne gerenderten Inhalt
...das ist nicht genau das, was ich will!!!

Habe auch versucht wie dieser, mit exakt dem gleichen Ergebnis:

lockedScreenContent= `
    <div class="modal-header" style="text-align: center">
        <h3 class="modal-title">Title</h3>
    </div>
    <div class="modal-body">
        <p>Body</p>
    </div>
    <div class="modal-footer">
        <p>Footer</p>
    </div>
`;

Was bin ich? Wäre es nicht möglich einfach nur eine Zeichenfolge übergeben, wie der "content" - parameter?

Nicht sehen können, in meinen Kopf zu kriegen, wie die Verwendung einer templateRef parameter aus der ts-Datei!

InformationsquelleAutor Patrik Nilsson | 2016-09-13

Schreibe einen Kommentar