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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Heute die
open
Methode der https://ng-bootstrap.github.io/#/components/modal hat die folgende Signatur:open(content: string | TemplateRef<any>, options: NgbModalOptions)
. Wie Sie sehen können aus dieser Signatur können Sie ein modales, die Inhalte bereitstellen, wie:string
TemplateRef
Den
string
eingegebene argument ist nicht sehr interessant - in der Tat war es vor allem Hinzugefügt, um debugging-Hilfe - /unit-Tests. Durch die Verwendung von ihm können Sie passieren einfach ... naja, ein Stück text ohne markup-Symbole nicht Eckig Richtlinien. Als solches ist es wirklich ein debug-tool und nicht etwas, das nützlich ist, im real-life-Szenarien.Den
TemplateRef
argument ist interessant, da es Ihnen erlaubt, pass markup + Richtlinien angezeigt werden. Sie können eine hand auf eineTemplateRef
by doing<template #refVar>...content goes here...</template>
irgendwo in der Komponente template (eine Vorlage für eine Komponente aus, die Sie planen zu öffnen ein modal). Als solche dieTemplateRef
argument ist mächtig, wie es Ihnen erlaubt, markup, Richtlinien, andere Bauteile etc. Der Nachteil ist, dassTemplateRef
ist nur sinnvoll, wenn Sie das öffnen eines modalen aus einer Komponente mit einer Vorlage.Habe ich den Eindruck, dass Sie sich für die Funktion ist geplant aber noch nicht implementiert - Möglichkeit zum öffnen eines modalen Komponenten-Typ als Inhalt. Es würde wie folgt funktionieren:
modalService.open(MyComponentWithContent)
. Wie ich bereits erwähnt habe, dies ist Teil der roadmap, aber noch nicht umgesetzt. Sie können verfolgen, diese Funktion, indem Sie die folgenden https://github.com/ng-bootstrap/ng-bootstrap/issues/680Nur um zu aktualisieren, wird die Komponente als ein Inhalt ist bereits umgesetzt. Die verlinkten Dokumentation hatte auch aktualisiert
wie kann ich catch geöffnet modalRef Staat?
InformationsquelleAutor pkozlowski.opensource
Können Sie nun Folgendes tun...
Können sagen, Sie haben ein Modell, Komponenten-Modell Bestätigen, dass Sie möchten, verwenden Sie es in jeder anderen Komponente.
Sicherzustellen, dass Ihr Modell-component-template ist im inneren div-Tags und nicht
die ng-template-tag.
Können Sie dann mit den folgenden open-Methode von jeder anderen Komponente.
modalReference: NgbModalRef;
Konstruktor(private modalService: NgbModal) { }
diese.modalReference =.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', Tastatur: false, "zentriert": true});
InformationsquelleAutor Rahul Wasnik