如何用布尔值关闭 Angular2 模式？

Question

我是 html 和 Angular2 的新手。对此问题的任何帮助将不胜感激。

我将一个表单组件放置在 ng2-modal 中，我希望当表单 return 是事件中的布尔值时关闭模式。

该表单用于向数据库添加新的 class。它的第一次使用是在另一个页面上，它不在模态内。在那里，在组件中单击 cancel/submit 后，我得到它 return true 然后重定向到另一个 url.

对于新的实现，我希望模式在表单 returns true 时关闭。问题是 save/cancel 按钮位于包含表单的组件中。所以我不能只使用模态框的点击事件来关闭它。

这是我当前的代码：

<modal #addNewClassModal>
    <modal-header>
        <h4 class="modal-title"><i class="fa fa-cube"></i>  Add a new class</h4>
    </modal-header>
    <modal-content>

      <div>
        <add-new-class (closeModal)="finishAddingNewClass($event)">
        </add-new-class>
      </div>

    </modal-content>
</modal>

我的问题是我不知道如何让模态 close() 方法依赖于布尔值。我试过将 closeModal="addNewClassModal.close()" 放在不同的地方并切换语法，但它不起作用，我在网上找不到任何东西。

Answer 1

您可以将对 addNewClassModal 的引用传递给您的 AddNewClass 组件：

<add-new-class [modal]="addNewClassModal">
</add-new-class>

并在您的 AddNewClass 组件中为模态添加 Input()：

import { Input } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/components/modal';

@Input()
modal: ModalDirective; // you can also set type to any instead of ModalDirective

然后在您的组件中，您可以使用 hide() 函数关闭模态：

this.modal.hide();

如何用布尔值关闭 Angular2 模式？

How to close an Angular2 modal with a boolean?

html

typescript

ng2-bootstrap

angular