web-dev-qa-db-fra.com

Meilleure pratique pour appeler la méthode ouverte NgbModal

Jouer avec le NgbModal et vouloir déclencher la méthode ouverte -> open(content: string | TemplateRef<any>, options: NgbModalOptions) <- ailleurs que dans le code du modèle. Dans mon cas, je souhaite passer une chaîne comme paramètre lors de l'exécution de la méthode dans le fichier .ts de mon composant. Lorsque vous exécutez la méthode via un bouton dans le fichier html comme ceci: <button (click)="open(content)">Launch demo modal</button>, le code fonctionne très bien, bien sûr avec tout le code de l'intérieur du <template></template> dans le fichier html.

Essayer d'accomplir quelque chose avec ceci:

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

Le code s'exécute sans erreur, et le modal s'ouvre comme ceci: Modal sans contenu rend ... ce qui n'est pas exactement ce que je veux!

Aussi essayé comme ça, avec exactement le même résultat:

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

Qu'est-ce que je rate? Ne serait-il pas possible de simplement passer une chaîne comme paramètre "contenu"?

Je ne vois pas non plus comment utiliser un paramètre templateRef du fichier ts!

angularmodal-dialogng-bootstrap
11
Patrik Nilsson

À ce jour, la méthode open de https://ng-bootstrap.github.io/#/components/modal a la signature suivante: open(content: string | TemplateRef<any>, options: NgbModalOptions). Comme vous pouvez le voir sur cette signature, vous pouvez ouvrir un contenu modal fournissant:

  • string
  • TemplateRef

L'argument typé string- n'est pas très intéressant - en fait, il a été principalement ajouté pour faciliter le débogage/les tests unitaires. En l'utilisant, vous pouvez passer juste ... eh bien, un morceau de texte, sans aucun balisage pas Angular. En tant que tel, c'est vraiment un outil de débogage et pas quelque chose d'utile dans la réalité - scénarios de vie.

L'argument TemplateRef est plus intéressant car il vous permet de passer des balises + directives à afficher. Vous pouvez mettre la main sur un TemplateRef en faisant <template #refVar>...content goes here...</template> Quelque part dans votre modèle de composant (un modèle de composant à partir duquel vous prévoyez d'ouvrir un modal). En tant que tel, l'argument TemplateRef est puissant car il vous permet d'avoir du balisage, des directives, d'autres composants, etc. L'inconvénient est que TemplateRef n'est utile que si vous ouvrez un modal à partir d'un composant avec un modèle.

J'ai l'impression que vous recherchez la fonctionnalité prévue mais pas encore implémentée - la possibilité d'ouvrir un modal avec un type de composant comme contenu. Cela fonctionnerait comme suit: modalService.open(MyComponentWithContent). Comme je l'ai mentionné, cela fait partie de la feuille de route mais n'est pas encore implémenté. Vous pouvez suivre cette fonctionnalité en suivant https://github.com/ng-bootstrap/ng-bootstrap/issues/68

15
pkozlowski.opensource

Vous pouvez maintenant faire ce qui suit ...

Disons que vous avez un composant de modèle Confirmez le modèle que vous souhaitez utiliser dans tout autre composant.

  1. ModelComponentName est ajouté aux sections déclarations et entryComponent dans le module.ts
  2. N'oubliez pas d'ajouter NgbModule.forRoot () dans les importations de votre fichier de module qui contient les déclarations que vous avez mentionnées ci-dessus.

  3. Assurez-vous que votre modèle de composant de modèle se trouve dans la balise div et non dans la balise ng-template.

Vous pouvez ensuite utiliser la méthode ouverte suivante à partir de tout autre composant.

modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});
2
Rahul Wasnik