Angular 2 NgbModal NgbActiveModal 关闭事件模式答案

【问题标题】：Angular 2 NgbModal NgbActiveModal close event modalAngular 2 NgbModal NgbActiveModal 关闭事件模式
【发布时间】：2017-11-18 16:48:28
【问题描述】：

我正在使用 Angular 2，我正在使用表单模式，我有两个组件，我从一个组件中以这种方式打开表单模式：

import { Component, OnInit, Output} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyFormComponent } from '......./....';


@Component({
    moduleId: module.id,
    selector: 'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponent implements OnInit {

    private anyData: any;
    private anyDataForm: any;


    constructor(
        private modalService: NgbModal
    ) { }

    ngOnInit(): void {
    }

    open() {
        const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
        modalRef.componentInstance.anyDataForm = this.anyData;
    }

    possibleOnCloseEvet() { 
        //Do some actions....
    }

}

open() 方法从 my-component.html 上的按钮触发

在 Form 组件（模态组件）上，我使用它来关闭实际的模态（从自身）

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'my-form-component',
    templateUrl: 'my-form-component.html'
})
export class MyFormComponent implements OnInit, OnDestroy {

    @Input() anyDataForm: any;

    constructor(
        public activeModal: NgbActiveModal
    ) {
    }

    ngOnInit(): void {
    }

    //Some form code...

    OnSubmit() {
        this.activeModal.close(); //It closes successfully
    }

    ngOnDestroy(): void {
    }

}

我需要做的是在调用者组件上触发某种“关闭”事件，以便仅在模式关闭时在调用者中执行一些操作。（不能使用事件发射器）

组件打开器有什么方法可以知道模态何时关闭？我还没有找到任何明确的例子。

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

试试这个：

const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
modalRef.componentInstance.anyDataForm = this.anyData;

modalRef.result.then((data) => {
  // on close
}, (reason) => {
  // on dismiss
});

【讨论】：

我只是想在模式关闭时触发一些服务，所以我使用 finally() 而不是 Cheers @Adnan

【解决方案2】：

在我的 ModalformComponent 上

 this.activeModal.close('success');

然后在我的父组件 ListComponent 上

 this.modalRef = this.modalService.open(ModalformComponent);
 this.modalRef.componentInstance.title = 'Add Record';
 this.modalRef.result.then((result) => {
  if ( result === 'success' ) {
     this.refreshData(); // Refresh Data in table grid
  }
}, (reason) => {
});

【讨论】：

【解决方案3】：

在MyFormComponent可以添加

closeModal() { this.activeModal.close( anything ); }

【讨论】：

【解决方案4】：

使用this.activeModal.dismissAll() 代替this.activeModal.close();。它将成功关闭弹出窗口。

【讨论】：

OP可以成功关闭模态。所需要的是以某种方式在打开它的代码中收听它，以便他们可以运行一些代码，例如更新其中的数据。