Как закрыть модальное окно Angular2 с помощью логического значения?

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

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

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

Для новой реализации я хочу, чтобы модальное окно закрывалось, когда форма возвращает true. Проблема в том, что кнопки сохранения/отмены находятся в компоненте, содержащем форму. Поэтому я не могу просто использовать модальное событие клика, чтобы закрыть его.

Вот мой текущий код:

<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()" в разные места и переключать синтаксис, но это не работает, и я не могу ничего найти в Интернете.


typescript angular html ng2-bootstrap
person Dónal Flanagan    schedule 16.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете передать ссылку на 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();
person Stefan Svrkota    schedule 16.12.2016
comment
Но не испортит ли это компонент для использования в первом случае, когда он не содержится в модальном окне? Я пытаюсь импортировать один и тот же компонент для обоих случаев, потому что он будет необходим в нескольких местах на сайте. - person Dónal Flanagan; 16.12.2016
comment
@DónalFlanagan Не будет, значения Input() являются необязательными, а не обязательными. - person Stefan Svrkota; 16.12.2016
comment
Это сработало! Я не понимал, что события Input() не являются обязательными. Теперь я просто называю это двумя разными способами. (1) <add-new-class redirectUrl='classes'> </add-new-class> и (2) внутри модального окна <add-new-class [modal]="addNewClassModal2"></add-new-class> Затем, когда пользователь нажимает Отмена, я вызываю метод (click)="onFinishAddingNewClass()", который выходит из модального окна в соответствии с типом ввода. - person Dónal Flanagan; 16.12.2016
comment
@DónalFlanagan Отлично, я рад, что это помогло. Пожалуйста, отметьте мой ответ как принятый и проголосуйте за него, если он помог. :-) (оба слева от ответа) - person Stefan Svrkota; 16.12.2016