Wie Sie programmgesteuert schließen-ng-bootstrap-modal?

Habe ich ein modal:

<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>

Immer, wenn ich Sie ja, ich möchte das er eine Funktion aufrufen und schließen sich an.
In mein controller, ich habe @ViewChild('warningModal') warning; und in submit() habe ich this.warning.close();, aber ich bekomme this.warning.close is not a function immer wenn ich auf "ja".

Wie bekomme ich diese zu arbeiten, wie ich es möchte?

ist es ng-bootstrap-oder ng2-bootstrap?

InformationsquelleAutor Alex Kibler | 2016-11-02

  1. 15

    Wenn Sie https://ng-bootstrap.github.io/ (wie in deiner Frage) Dinge sind sehr einfach - Sie können nur öffnen Sie ein modal und schließen es aus einer Vorlage (wie in deinem code) oder programmgesteuert (durch Aufruf close() Methode auf das zurückgegebene Objekt vom Typ NgbModalRef).

    Ist hier ein minimal-Beispiel zeigt diese in Aktion: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

    Könnten Sie entweder verwirrend unterschiedlichen Bibliotheken oder vielleicht gibt es JMD mehr zu Ihrer Frage, aber es ist schwer zu sagen, mehr nur auf die info zur Verfügung gestellt.

    Danke! Das ist genau so, wie ich es gelöst. Ich habe nur vergessen, wieder zu kommen und zu Bearbeiten. Ihr Projekt ist toll, btw.
    plunkr nicht funktioniert.
    plunker nicht funktioniert, aber deine Lösung ist Arbeit für mich,

    InformationsquelleAutor pkozlowski.opensource

  2. 57

    Zu erläutern, auf pkozlowski.opensource-Antwort, die Möglichkeit habe ich den Verweis auf die NgbModalRef-Klasse wurde durch das ändern, was in seinem plunker auf der diese.modalService.öffnen Sie wie folgt vor:

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

    Dann war ich in der Lage zu nennen:

    this.modalReference.close();

    Die arbeitete wie ein Charme. Oh, und vergessen Sie nicht, setzen definieren modalReference an der Spitze der Klasse:

    modalReference: any;
    Ehrfürchtige Antwort! Vergessen Sie nicht importieren NgbModalRef!
    Sie nicht wirklich brauchen, um es zu importieren, wenn Sie definieren modalReference wie er
    Optional können Sie die pass-argument zu schließen, zB this.modalReference.close("submitted");
    ich fand diese Antwort direkt auf den Punkt, lösen meine Schnellste Lösung.
    nach einer Stunde dieses problem zu lösen, fand ich dieses..danke es hilft viel

    InformationsquelleAutor TBrenner

  3. 9

    Im Gegensatz zu TBrenner ich konnte es nicht' nur verwenden modalReference: any;

    Habe ich mit:

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

    Hatte ich zum importieren in meine app.- Modul.ts

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

    und natürlich fügen Sie es zu dem Anbieter: 

    providers[ NgbModal]

    sobald es fertig ist, hier ist der code aus der modalen Komponente:

     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 sollte hinzufügen, einige Informationen über die Referenz Bedeutung.. ich kämpfte ein wenig zu verstehen, ich brauchte, um einen Verweis zu erstellen, um den Zugriff auf die ".close ()" - Methode. Dank Euch allen, es hat mir sehr geholfen!

    InformationsquelleAutor Christophe Gudlake

  4. 3

    Öffnen der modal

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

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

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

    schließen die modale Verwendung der Referenz, wie Amit sagte

    this.modalReference.close();

    Quelle:https://ng-bootstrap.github.io/#/components/modal/examples

    InformationsquelleAutor Eric

  5. 1

    Was Sie getan haben, mit @ViewChild('warningModal') warning ist den TemplateRef Sie als in Ihrem modal ist, nicht die tatsächliche NgbModalRef.

    Es hängt davon ab, wie Sie open up your modal, wenn Sie es öffnen programmgesteuert erhalten Sie NgbModalRef Objekt, das Sie anrufen könnte .close auf.

    InformationsquelleAutor Amit

  6. 1

    Haben Sie let-d oder let-c im <template #warningModal let-c="close" let-d="dismiss"> als Variablen, die beide Funktionen. So, der einfache Weg, es zu tun ist: pass in c oder d in senden als argument wie dieses (click)="submit(c)" oder (click)="submit(d)" und dann in der Funktion rufen Sie einfach submit(c){ c('close modal'); }. Hoffe, das funktioniert für Sie.

    InformationsquelleAutor Edwin Anciani

Schreibe einen Kommentar