Question

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

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

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

对于新实现，我希望在表单返回true时关闭模式。问题是保存/取消按钮位于包含表单的组件中。所以我不能只使用模态的click事件来关闭它。

这是我目前的代码：

<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模态？

1 个答案: