angular - ¿Cómo pasar parámetros a un modal?

Así es como utilizo el modal de 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);
    });
  }
}

Estoy un poco confundido, porque pensaba que el contenido se usa para pasar parámetros al modal. Pero en mi opinión, ¿solo es el nombre que el método open necesita para encontrar la plantilla correcta?

Entonces, ¿cómo puedo pasar parámetros?

Respuesta #1

Cualquiera que aún se encuentre con esto podría encontrarlo útil, todo lo que necesitas hacer es declarar un campo dentro de tu ModalComponent así:

 modalHeader: string;
 advertiser: Advertiser;

Puedes establecer estos campos haciendo lo siguiente cuando estés abriendo un modal.

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

En tu plantilla puedes acceder a ellos así:

value={{advertiser.code}}

Espero que esto ayude.

Respuesta #2

Para pasar parámetros/datos al modal, mi suposición sería usar el 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);
    });
}

Esto asume que el componentInstance es del tipo MyComponent y que tiene una propiedad pública data