Pesquisa de site

angular - Como passar parâmetros para o modal?

É assim que eu uso o 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);
    });
  }
}

Estou um pouco confuso, porque pensei que o conteúdo é usado para passar parâmetros para o modal. Mas, na minha opinião, é apenas o nome que o método open precisa para encontrar o template correto?

Então, como posso passar parâmetros?

Resposta #1

Qualquer pessoa que ainda tropeçar neste pode achar isso útil, tudo o que você precisa fazer é declarar um campo dentro do seu ModalComponent assim:

 modalHeader: string;
 advertiser: Advertiser;

Você pode definir esses campos fazendo o seguinte quando estiver abrindo um modal.

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

No seu modelo, você pode acessá-los assim:

value={{advertiser.code}}

Espero que isso ajude.

Resposta #2

Para passar parâmetros/dados para o modal, meu palpite seria usar o 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);
    });
}

Isso assume que o componentInstance é do tipo MyComponent e que ele possui uma propriedade pública data

Artigos relacionados