首页 文章

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

提问于
浏览 次
1

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

我将一个表单组件放在ng2-modal中，我希望当表单从一个事件返回一个布尔值时，该模式将关闭 .

该表单用于向数据库添加新类 . 它的第一个用法是在另一个页面上，它不在模态中 . 在那里，点击组件中的取消/提交后，我让它返回 true 然后重定向到另一个网址 .

对于新的实现，我希望在窗体返回 true 时关闭模式 . 问题是保存/取消按钮位于包含表单的组件中 . 所以我可以't just use the modal'点击事件来关闭它 .

这是我目前的代码：

<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()" 放在不同的地方并切换语法，但它不起作用，我在网上找不到任何东西 .

html angular typescript ng2-bootstrap

1 回答

  • 0

    您可以将对 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();
    回复于

相关问题