(Как) я могу вызвать функцию родительского компонента из модального NgbModal? - PullRequest
Новая
       7

(Как) я могу вызвать функцию родительского компонента из модального NgbModal?

0 голосов
/ 01 ноября 2018

Я использую NgbModal из @ ng-bootstrap , чтобы открыть модальные окна из приложения Angular 6. В одном из этих модальных режимов мне нужно было бы нажать кнопку, чтобы закрыть модальный режим и активировать функцию в родительском / запускающем компоненте. Как я могу это сделать?

Я знаю, что с обычными дочерними и родительскими компонентами вы можете генерировать событие, которое перехватывается родительским компонентом (см. это решение здесь ). Есть ли что-то аналогичное, что я могу сделать с моими модальными настройками? Если нет, то какой здесь лучший подход?

Текущий код в родительском (упрощенно): 

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from "...";
@Component ( {...} )
export class ParentComponent {
  ...
  constructor(private modalService: NgbModal) {}
  ...
  showModal(i:InputObject) {
    const modalRef = this.modalService.open(ModalCompoenent);
    modalRef.componentInstance.i = i;
  }
}

1 Ответ

0 голосов
/ 01 ноября 2018

Кнопка закрытия модального окна может вызвать метод NgbActiveModal.close , с модальным значением результата в качестве параметра: 

import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";

export class ModalComponent {
  constructor(public activeModal: NgbActiveModal) { }
}

<button type="button" (click)="activeModal.close('This is my answer')">Close</button>
<Ч />

В родительском компоненте вы обрабатываете обещание NgbModalRef.result с соответствующими обратными вызовами. Полученное значение можно получить с помощью обратного вызова «success», в котором вы можете вызвать любой метод родительского компонента: 

const modalRef = this.modalService.open(ModalComponent);
...
modalRef.result.then(
  (data: any) => {
    this.processData(data);
  },
  (reason: any) => { });

См. этот стек для демонстрации.

...