Как программно закрыть мод ng-bootstrap?

Ответ 1

Если вы используете https://ng-bootstrap.github.io/ (как указано в вашем вопросе), все предельно просто - вы можете просто открыть модальное и закрыть его из шаблона (как в вашем коде) или программно ( путем вызова метода close() для возвращенного объекта типа NgbModalRef).

Вот минимальный пример, показывающий это в действии: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

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

Ответ 2

Чтобы изложить ответ на pkozlowski.opensource, способ, которым я действительно получил ссылку на класс NgbModalRef, был путем изменения того, что находится в его plunker на this.modalService.open следующим образом:

this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = 'Closed with: ${result}';
}, (reason) => {
  this.closeResult = 'Dismissed ${this.getDismissReason(reason)}';
});

Тогда я смог позвонить:

this.modalReference.close();

Это работало как прелесть. О, и не забудьте поставить определение modalReference в верхней части класса:

modalReference: any;

Ответ 3

В отличие от TBrenner я не мог "просто использовать modalReference: any;

Я бегу с:

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    with angular 5

Мне пришлось импортировать в свой app.module.ts

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

и, конечно же, добавить его к провайдерам:

providers[ NgbModal]

как только это делается здесь, это код из модального компонента:

 import { Component, Input } from '@angular/core'; 
 import { ModalDismissReasons, NgbModal, NgbModalRef } from '@ng 
 bootstrap/ng-bootstrap';

export class MyClass {
modalReference: NgbModalRef;

constructor(private modalService: NgbModal)
open(content) {
this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = 'Closed with: ${result}';
}, (reason) => {
  this.closeResult = 'Dismissed ${this.getDismissReason(reason)}';
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return 'with: ${reason}';
}
}

JoinAndClose() {
this.modalReference.close();
}

https://ng-bootstrap.github.io должен добавить некоторую информацию о ссылочной важности. Я немного пытался понять, что мне нужно создать ссылку для доступа к методу ".close()". Спасибо всем, это очень помогло!

Ответ 4

Чтобы открыть модальный

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

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

openVerticallyCentered(content) {
    this.modalReference = this.modalService.open(content, { centered: true });
  }

закрыть модальный, используя ссылку, как сказал Амит.

this.modalReference.close();

источник: https://ng-bootstrap.github.io/#/components/modal/examples

Ответ 5

Что вы сделали с @ViewChild('warningModal') warning получите TemplateRef вы использовали как в своем модальном, а не в реальном NgbModalRef.

Это зависит от того, как вы открываете свой модальный, если вы его программно открываете, вы должны получить объект NgbModalRef который вы могли бы назвать .close on.

Ответ 6

У вас есть let-d или let-c в <template #warningModal let-c="close" let-d="dismiss"> как переменные, обе функции. Таким образом, простой способ сделать это: передать в c или d в качестве аргумента (click)="submit(c)" или (click)="submit(d)" а затем в функции просто вызвать submit(c){ c('close modal'); } submit(c){ c('close modal'); }. Надеюсь, это сработает для вас.

Ответ 7

Вы можете просто закрыть модал ниже.

Сначала, когда мы открываем модал

this.modalService.open(content, { size: "lg" }).result.then(
      result => {
        this.closeResult = 'Closed with: ${result}';
      },
      reason => {
        this.closeResult = 'Dismissed ${this.getDismissReason(reason)}';
      }

После этого в ТС для закрытия используйте этот

 this.modalService.dismissAll();

Ответ 8

Спасибо. Вы сделали мой день....