web-dev-qa-db-ja.com

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

[はい]をクリックするたびに、関数を呼び出して自動的に閉じます。
コントローラーには@ViewChild('warningModal') warning;があり、submit()にはthis.warning.close();がありますが、[はい]をクリックするとthis.warning.close is not a functionが表示されます。

これを私が望むように機能させるにはどうすればよいですか？

angularng-bootstrap
26
Alex Kibler

https://ng-bootstrap.github.io/ （質問に示されているように）を使用している場合、状況は非常に単純です-モーダルを開いて、テンプレートから（またはコード内）orプログラムで（返されるNgbModalRef型のオブジェクトでclose()メソッドを呼び出すことにより）.

これが実際に動作することを示す最小限の例です。 http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

異なるライブラリを混同しているかもしれませんし、あなたの質問にもっとあるかもしれませんが、提供された情報だけに基づいてそれ以上言うのは難しいです。

17
pkozlowski.opensource

Pkozlowski.opensourceの応答を説明するために、実際にNgbModalRefクラスへの参照を取得する方法は、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();

それは魅力のように働いた。ああ、クラスの一番上にdefine modalReferenceを置くことを忘れないでください：

modalReference: any;
62
TBrenner

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（）」にアクセスするための参照を作成する必要があることを理解するのに少し苦労しました方法。みんなありがとう、それは大いに役立った！

10
Christophe Chenel

以下の方法で簡単にモーダルを閉じることができます。

最初にモーダルを開くと

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

その後、TSで終了するためにこれを使用します

 this.modalService.dismissAll();
4
Jignesh Mistry

モーダルを開くには

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

3
Eric

let-dにlet-cまたは<template #warningModal let-c="close" let-d="dismiss">が変数としてあり、両方とも関数です。そのための簡単な方法は、この(click)="submit(c)"または(click)="submit(d)"のようにcまたはdを引数としてsubmitに渡してから、関数でsubmit(c){ c('close modal'); }を呼び出すだけです。それがあなたのために働くことを願っています。

1
Edwin Anciani

@ViewChild('warningModal') warningで行ったことは、実際のTemplateRefではなく、モーダルで使用した NgbModalRef を取得することです。

モーダルをどのように開くかによって異なります。プログラムで開く場合は、.closeを呼び出すことができるNgbModalRefオブジェクトを受け取る必要があります。

1
Amit