Comment passer des paramètres à modale?

C'est la façon dont j'utilise le ng2-modal bootstrap:

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'add-customer-modal',
  template: `
    <template #test let-c="close" let-d="dismiss">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
      </div>
    </template>
    <button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>
  `
})
export class AddCustomerModal {

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, { size: 'lg' }).result.then((result) => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }
}

Je suis un peu confus, parce que je pensais que le contenu est utilisé pour transmettre des paramètres modaux. Mais à mon avis c'est juste le nom de la méthode ouverte besoins pour trouver le bon modèle?

Alors, comment puis-je passer des paramètres?

  • lire ici pour plus d'info: http://stackoverflow.com/questions/39464345/best-practice-for-calling-the-ngbmodal-open-method
  • Merci! Et comment puis-je passer des paramètres/données pour le modal?
  • Pour tous ces gens qui essaient de trouver un moyen de faire fonctionner "la voie de la facilité," il n'est pas de la magie. Si vous utilisez l' (paresseux) "passer par TemplateRef" la méthode, vous ne POUVEZ PAS utiliser componentInstance car il n'est pas défini lorsqu'un TemplateRef est passé dans le NgbModal.
InformationsquelleAutor robert | 2016-12-14
  1. 14

    Pour passer des paramètres/données pour le modal, mon estimation serait d'utiliser la componentInstance:

    open(content) {
    const modal: NgbModalRef = this.modalService.open(content, { size: 'lg' });

    (<MyComponent>model.componentInstance).data = 'hi';

    modal.result.then((result) => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
}

    Cela suppose que le componentInstance est de type MyComponent et qu'il a une propriété publique data

    • J'obtiens cette erreur. La propriété 'componentInstance" n'existe pas sur le type "BsModalRef'.
    • C'est parce que vous êtes à l'aide de ngx-bootstrap et pas ng-bootstrap. Je crois que vous devez utiliser content au lieu de componentInstance
    InformationsquelleAutor PierreDuc
  2. 10

    Ceux qui sont encore en trébuchant sur ce pourraient trouver cela à portée de main, tout ce que vous devez faire est de déclarer un champ à l'intérieur de votre ModalComponent comme ceci:

     modalHeader: string;
 advertiser: Advertiser;

    Vous pouvez définir ces champs de la manière suivante lorsque vous êtes à l'ouverture d'un modal.

    advertiserModalShow() {
    const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
    activeModal.componentInstance.modalHeader = 'Advertiser';
    activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}

    Dans votre modèle, vous pouvez y accéder comme ceci:

    value={{advertiser.code}}

    Espère que cette aide.

    • J'obtiens cette erreur. La propriété 'componentInstance" n'existe pas sur le type "BsModalRef'
    • De vérifier la version, vous avez probablement besoin de mettre à jour la dépendance.
    • cela peut entraîner des ExpressionChangedAfterItHasBeenCheckedError erreur
    InformationsquelleAutor Sadiq Ali
  3. 1

    Voici comment vous pouvez transmettre des données à votre Modèle HTML dans Angular2

    import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'add-customer-modal',
template: `
<template #test let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
     {{MESSAGE_DATA}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>
<button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>`})

export class AddCustomerModal {
   MESSAGE_DATA : any;
   constructor(private modalService: NgbModal) {}

   open(content) {
      this.MESSAGE_DATA = "PASS DATA TO ANGULAR2 MODAL"
      this.modalService.open(content, { size: 'lg' }).result.then((result) => {
         console.log(result);
      }, (reason) => {
      console.log(reason);
    });
 }
}

    vérifier comment MESSAGE_DATA est utilisé à l'intérieur de Modèle HTML.

    • vous définissez MESSAGE_DATA en composant parent et de l'utiliser, c'est facile. Comment définir MESSAGE_DATA dans open() et de le passer au format HTML?
    InformationsquelleAutor Devesh Jadon
  4. 1

    Je vous suggère de regarder l'Enfant Modal exemple ici ng2-bootstrap, documentation pour les auxiliaires modaux. Ajoutez simplement les variables publiques pour le composant parent et les utiliser dans votre modale standard en utilisant des techniques de liaison.

    Donc dans l'exemple de l'ajouter au modèle comme suit:

          <div class="modal-body">
          {{parentMessage}}
      </div>

    et de changer le composant comme ceci:

    export class DemoModalChildComponent {
  @ViewChild('childModal') public childModal:ModalDirective;
  parentMessage = 'I am a child modal, opened from parent component!'; //Add this

    Maintenant que vous êtes de passage dans les données du composant parent, vous pouvez transmettre les données pour le composant parent en suivant les modèles standard.

    InformationsquelleAutor GlennSills
  5. 1

    Il y est une meilleure approche pour gérer des données dans le modal si vous avez besoin d'avoir des données immédiatement après modal de la construction. À l'aide angulaire injecteur technic.

    1. Définir un modèle pour vos données.
    class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}
    1. Construire votre modal quelque part dans votre composant:
    this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});
    1. Poignée de récupérer les données dans votre Modal Composant
    @Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}
    InformationsquelleAutor Mikki