Öffnen ng-bootstrap-modal-programmgesteuert

Habe ich eine eckige 4-Seite mit einem ng-bootstrap-modal. Mein code sieht wie folgt aus.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

Wenn ich nun auf den button des modal geöffnet. Was ich jetzt machen möchte, ist öffnen Sie das Modell ngChanges. 

ngOnChanges(changes: any) {
   open(content)
}

Mein problem ist: Wie bekomme ich den "Inhalt" hier? Gibt es eine Möglichkeit, um die ng-template programmgesteuert? Vielen Dank im Voraus!

InformationsquelleAutor Christian Riese | 2017-07-16
  1. 27

    Zugriff auf die content element innerhalb der Klasse deklarieren:

    @ViewChild('content') private content;

    und fügen Sie die entsprechende import an der Spitze der Klasse:

    import { ViewChild } from '@angular/core';

    und schließlich call open-Methode für das element ändern, Detektor:

    ngOnChanges(changes: any) {
   this.open(this.content);
}
    • Danke, das hat funktioniert!
    • Einfache und funktionierende Lösung! (y)
    InformationsquelleAutor Vega
Schreibe einen Kommentar