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

Question

У меня есть модальный:

<template #warningModal let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    <h4 class="modal-title">Warning</h4> 
    </div> 
    <div class="modal-body"> 
     The numbers you have entered result in negative expenses. We will treat this as $0.00. Do you want to continue? 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button> 
    <button type="button" class="btn btn-secondary" (click)="submit()">Yes</button> 
    </div> 
</template> 

Всякий раз, когда я нажимаю да, я хочу, чтобы это вызвать функцию и замыкаться.
В моем контроллере у меня есть @ViewChild('warningModal') warning; и в submit(), у меня есть this.warning.close();, но я получаю this.warning.close is not a function всякий раз, когда я нажимаю «Да».

Как я могу заставить это работать так, как я этого хочу?

Answer 1

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

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

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

Answer 2

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

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

Answer 3

Изложить на ответ 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; 

Answer 4

В отличие от 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()». Спасибо всем, это очень помогло!