Я пытаюсь закрыть html boostrap модальный из файла component.ts - PullRequest
Новая
       34

Я пытаюсь закрыть html boostrap модальный из файла component.ts

0 голосов
/ 03 апреля 2019

Я пытался закрыть модал начальной загрузки из файла component.ts после успешной отправки формы.

Я пытался следовать инструкциям здесь:

https://ng -bootstrap.github.io / # / components / modal / api со стеком https://stackblitz.com/run?file=index.html

В то время как стек стека имеет определенную функцию открытия: 

open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

Хотя все, что я хочу сделать, это как показано в html-файле 

<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>

Точнее, просто так: 

(click)="modal.close('Save click')"

Однако у меня уже есть функция щелчка накнопка, которая означает, что та же самая функция должна вызывать функцию для закрытия модального окна при успешной отправке формы.

Я думаю, что часть, с которой я застрял, такова: «Ссылка на активный (в настоящее времямодальный. Экземпляры этого класса могут быть внедрены в компоненты, переданные как модальное содержимое. "

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Я бы порекомендовал вам использовать NgbActiveModal класс.Не стесняйтесь проверить API здесь .

В ваш component.ts вам нужно будет импортировать класс NgbActiveModal. 

import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
.
.

constructor(activeModal: NgbActiveModal) {}

close() {
  this.activeModal.close();
  // or this.activeModal.dismiss() depending on your requirements
}

И на вашемcomponent.html, вы можете связать метод close() с вашим событием click на вашей кнопке закрытия.

<button type="button" class="close" aria-label="Close" (click)="close()">
  <span aria-hidden="true">&times;</span>
</button>

На сайте NgBootstrap есть достойное демо с использованием NgbActiveModal.Я предоставил вам демо для справки.

0 голосов
/ 03 апреля 2019

Вам необходимо вставить объект NgbActiveModal в компонент, используемый в качестве всплывающего диалогового окна, а затем вызвать метод close для этой ссылки. 

@Component({..})
export class MyDialogComponent {
    public constructor(private _modal: NgbActiveModal) { }

    public close() {
        this._modal.close("result");
    }
}

См. Эту ссылку на документ:

https://ng -bootstrap.github.io / # / компоненты / модальный / апи # NgbActiveModal

...