web-dev-qa-db-fra.com

Ouvrir ng-bootstrap modal par programmation

J'ai une page angular 4 comprenant un modal ng-bootstrap. Mon code ressemble à ceci.

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);
}
[...]

Maintenant, quand je clique sur le bouton, le modal s'ouvre. Ce que je veux faire maintenant, c'est ouvrir le modèle sur ngChanges.

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

Mon problème est: comment puis-je obtenir le "contenu" ici? Existe-t-il un moyen d'obtenir le modèle ng par programme? Merci d'avance!

angularmodal-dialogng-bootstrapng-template
13
Christian Riese

Pour accéder à l'élément content à l'intérieur de la classe, déclarez:

@ViewChild('content') private content;

et ajoutez l'importation correspondante en haut de la classe:

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

et enfin appeler la méthode ouverte pour cet élément dans le détecteur de changement:

ngOnChanges(changes: any) {
   this.open(this.content);
}
26
Vega