Question

我使用ng2-bs3-modal库使用Typescript和Angular 2编写模态。它主要工作，但我无法弄清楚如何使函数执行< em>模态关闭的每个时间。现在，如果你通过模态改变一些状态，关闭它，然后重新打开它，状态仍然会改变。但是，我希望能够打电话给＆＃34; clear（）＆＃34;每次关闭模态时都会执行函数（或执行其他操作）。

我已经在这里阅读了文档：https://github.com/dougludlow/ng2-bs3-modal，在我看来应该有一种方法可以使用onClose EventEmitter来调用每次模态时的函数已关闭，但我无法找到如何做到这一点的示例。

这是我的代码的配对版本：

<modal #Modal>
<modal-header [show-close]="true">Header </modal-header>
<div class="modal-body">
    <form (ngSubmit)="onConfirm()">
        <label>NAME</label>
        <input type="text" [(ngModel)]="name"/>
    </form>
</div>

这里是打字稿文件：

import { Component, Input, Output, EventEmitter, ViewChild } from "@angular/core"; 
import { MODAL_DIRECTIVES, ModalComponent } from "ng2-bs3-modal/ng2-bs3-modal"; 

@Component({ selector: "modal", templateUrl: "/modal.html", directives: [MODAL_DIRECTIVES] }) 

export class SaveSearchModalDirective { 

    @Output() Confirm = new EventEmitter<string>(); 
    @ViewChild("Modal") Modal: ModalComponent; 

    name: string; 
    constructor() { } 

    open() { 
        // do some things 
    } 

    clear() { 
        // do some things 
    } 

    onConfirm() { 
        // do more things 
        this.Confirm.emit(this.name); 
        this.close(); 
    } 
}

同样，我已经完成了所有细节，并且模态功能非常有用。但是如何让我的clear( )函数在模态关闭的每个时间被称为？

谢谢！

Answer 1

您可能需要将html模板更改为：

<modal #Modal (onClose)="clear();">

如果事件传递了一些事件参数，那么它应该是

<modal #Modal (onClose)="clear($event);">

并且您的clear方法应该接收输入参数。

可能你应该听＃on; onDismiss＆＃34;事件也是......

查看关于事件发射器的本教程： https://toddmotto.com/component-events-event-emitter-output-angular-2

Answer 2

有正常的angular2点击事件来调用你的打字稿函数（点击）=“closeModal（）”

<modal #myModal [keyboard]="false" [backdrop]="'static'">
        <modal-header>
           <button (click)="closeModal()"></button>
        </modal-header>
        <modal-body>
          //body
        </modal-body>
    </modal>

然后在组件中导入ModalComponent

<强> component.ts

    import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

export class ModalExampleComponent {

    @ViewChild('myModal ')
    modal: ModalComponent;

    closeModal() {
       this.modal.close();
    }
}

Answer 3

除了Luis的回答，您可以订阅组件中的事件发射器并执行发射后面的一些操作，例如：

@ViewChild('myModal ')
modal: ModalComponent;

 ...
ngOnInit() {
  ...
  this.modal.onClose.subscribe(_ => {
     // code to do something when the modal is closed
  }
  ...
}

您也可以以类似的方式使用onOpen和onDismiss（）EventEmitters。

Angular2 ng2-bs3-modal：每次模态关闭时如何执行函数？

3 个答案: