web-dev-qa-db-fra.com

Comment passer des paramètres à modal?

C'est ainsi que j'utilise le modal ng2-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, car je pensais que le contenu était utilisé pour transmettre des paramètres au modal. Mais à mon avis, c’est uniquement le nom dont la méthode ouverte a besoin pour trouver le bon modèle?

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

angulartypescriptmodal-dialogng-bootstrap
10
robert

Pour passer des paramètres/données au modal, je suppose que j'utiliserais la variable 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 composantInstance est de type MyComponent et qu'il possède une propriété publique data

13
PierreDuc

Si vous trouvez toujours cela utile, il vous suffit de déclarer un champ dans votre ModalComponent comme ceci:

 modalHeader: string;
 advertiser: Advertiser;

Vous pouvez définir ces champs en procédant comme suit lorsque vous ouvrez 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}}

J'espère que cela t'aides.

9
Sadiq Ali

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érifiez comment MESSAGE_DATA est utilisé dans HTML Template. 

2
Devesh Jadon

Il existe une meilleure approche pour traiter les données dans le modal si vous devez disposer de données immédiatement après la construction modale. Utilisation de la technique angulaire injecteur.

  1. Définissez un modèle pour vos données.
class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}
  1. Construisez 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. Gérer la récupération de données dans votre composant modal
@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}
1
Mikki

Je vous suggère de regarder l'exemple de Child Modal ici/ la documentation de ng2-bootstrap pour modals . Ajoutez simplement des variables publiques au composant parent et utilisez-les dans votre modal à l'aide de techniques de liaison standard. 

Donc, dans l'exemple, ajoutez ceci au modèle de la manière suivante:

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

et changez 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 transmettez des données du composant parent, vous pouvez les transmettre au composant parent en suivant les modèles standard.

1
GlennSills