如何使用布爾值來關閉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模態？

回答

相關問題