我正在使用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 {
    }

}

我需要做的是在调用者组件上触发某种“on close”事件,以仅在模式关闭时才在调用者中执行某些操作。 (不能使用事件发射器)

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

最佳答案

试试这个:

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

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

关于Angular 2 NgbModal NgbActiveModal关闭事件模态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44580255/

10-12 12:22
查看更多