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

我是新来的html和Angular2。任何有关这个问题的帮助将不胜感激。如何使用布尔值来关闭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()"放在不同的地方，并改变语法，但它不工作，我在网上找不到任何东西。

来源

2016-12-16 Dónal Flanagan

你可以传给你的AddNewClass组件addNewClassModal参考：

<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();

来源

2016-12-16 11:01:51

但是，这不会混淆在第一种情况下使用的组件，它不包含在模式中？我想为两种情况导入相同的组件，因为它将在网站上的多个位置有必要。 –

@DónalFlanagan它不会，'Input（）'值是可选的，不是强制性的。 –

它的工作！我没有意识到Input（）事件不是强制性的。现在我只是用两种不同的方式来称呼它。（1）''和（2）在模式内' 然后，当用户点击_Cancel_时，我调用方法'（click）=“onFinishAddingNewClass（）”'，根据输入类型退出模态。 –

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

回答

相关问题