Как закрыть Angular2 modal с булевым?

Question

Я новичок в html и Angular2. Любая помощь в решении этой проблемы будет высоко оценена.

Я размещаю компонент формы внутри ng2-модального, и я хотел бы, чтобы модальная функция закрывалась, когда форма возвращает логическое значение из события.

Форма предназначена для добавления нового класса в базу данных. Его первое использование находится на другой странице, где он не находится внутри модального. Там, нажав на отмену/отправку в компоненте, я верну его true, а затем перенаправляюсь на другой URL-адрес.

Для новой реализации я хочу, чтобы модальная функция закрывалась, когда форма возвращает true. Проблема в том, что кнопки save/cancel находятся в компоненте, содержащем форму. Поэтому я не могу просто использовать событие 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();