web-dev-qa-db-ja.com

Angular 2 ng-bootstrap close Modal

Ng-boostrapの Documentation の例に示すように、open（content）関数を介して表示されたモーダルを閉じようとしています。 Webサイトでは、NgbActiveModalからcloseまたはdismissを呼び出すことができると述べています。

そこで、コンポーネントにNgbActiveModalを含めて、dismiss（）またはclose（）を呼び出そうとしました。両方とも機能しません。まず、dismiss（）は未定義です（NgbActiveModalをインポートするのは間違っていますか？）だから、NgbActiveModalをインポートした後でも、ng-bootstrapが提供する終了と終了にアクセスできないように思えます。モーダルファインを表示できることに注意してください

この例では、モーダルは（click）= "c（ 'Close click'）"によって閉じられました。私はそれがどこから来たのか分かりません。

だから...どうすればモーダルを取り除くためにclose（）またはdismiss（）（どちらでも動作します）を呼び出すことができます

modal dismiss

angularng-bootstrap
12
user172902

回答はこちらにあります。残念ながらng-bootstrapウェブサイトには多くの情報がありません ng-bootstrap Modalを閉じることができません

コンポーネントクラス内

  private modalRef: NgbModalRef;

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

  onSave() {
    this.modalRef.close();
  }
32
user172902

  1. モーダルコンポーネントで、次の行を追加する必要があります。

    @ViewChild('exampleModal') public exampleModal:ModalDirective;

  2. Htmlモーダルでは、divルートに挿入する必要があります。

    #exampleModal="bs-modal"

  3. モーダルコンポーネントで：

    onSave(){
   this.exampleModal.hide();
}
4
Yoav Schniederman

ng-bootstrapのドキュメントに従い、Angular 6を使用しました。最後に、ソリューションが 元の例 から1行変更していることがわかりました。

modal-options.html

<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="d('Close click')">Close</button>
  </div>
</ng-template>

これをlet-modalからこれに変更しましたlet-d = "dismiss"また、この2行：

  • （click）= "d（ 'クロスクリック'）"
  • （click）= "d（ 'Close click'）"

modal-options.ts

constructor(private modalService: NgbModal) {}

openLg(content) {
  this.modalService.open(content, { size: 'lg' });
}
0
Jorge Casariego