web-dev-qa-db-ja.com

コードを使用してAngular 2でモーダルを開く方法は？

通常、data-target="#myModal"で<button>を使用してモーダルを開きます。現時点では、モーダルを開くタイミングを制御するコードを使用する必要があります。

[hidden]または*ngIfを使用して表示する場合は、class="modal fade"を削除する必要があります。そうしないと、モーダルが表示されません。このような：

<div [hidden]="hideModal" id="myModal">

ただし、この場合、class="modal fade"を削除すると、モーダルはフェードインせず、背景に陰がなくなります。さらに悪いことに、画面中央ではなく画面下部に表示されます。

class="modal fade"を保持し、コードを使用して開く方法はありますか？

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>
angularbootstrap-modal
32
Hongbo Miao

私は error を取得していたため、@ arjun-skソリューション（ link ）に加えて、timeoutを設定する必要がありました。

setTimeout(() => {
      this.modalService.open(this.loginModal, { centered: true })
    }, 100);
0
Sudha

変数を使用して、表示と非表示を制御し、モーダルを開くボタンに依存しています

tsコード：

showModel(){
  this.showModal = true;
}

html：

<button type="button" data-toggle="modal" data-target="#myModal" (click)="showModel()>Open Modal</button>

<div *ngIf="showModal" >
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>
    </div>
</div>
0
jerry

多くのコーディングをせずにそれを行うために使用した方法は、.. _id="employeeRegistered"_の隠しボタンがあります。

私の_.ts_ファイルで私は_import ElementRef from '@angular/core'_

次に、_(click)_メソッドのすべてを処理した後、次のようにします。

this.el.nativeElement.querySelector('#employeeRegistered').click();

その後、モーダルは期待どおりに表示されます。

0
edgar yovanni rivera nolasco

Jqueryを使用してbootstrap modal。

ngAfterViewInit() { 
      $('#scanModal').modal('show'); 
}
0
user2900572

@ ng-bootstrap/ng-bootstrap npmプロジェクトでこのように使用しますbootstrapが使用されますが、資料にはダイアログを使用しました

HTMLコード

  <span (click)="openModal(modalRef)" class="form-control input-underline pl-3 ">Open Abc Modal
 </span>

モーダルテンプレート

<ng-template class="custom-modal"  #modalRef let-c="close" let-d="dismiss">
   <div class="modal-header custom-modal-head"><h4 class="modal-title">List of Countries</h4>
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
         <img src="assets/actor/images/close.png" alt="">
      </button>
  </div>
  <div class="modal-body country-select">
       <div class="serch-field">
           <div class="row">
               <div class="col-md-12">
                 <input type="text"  class="form-control input-underline pl-3" placeholder="Search Country"
                    [(ngModel)]="countryWorkQuery" [ngModelOptions]="{standalone: true}">
                 <ul *ngIf="countries" class="ng-star-inserted">
                   <li (click)="setSelectedCountry(cntry, 'work');d('Cross click');" class="cursor-pointer"
                   *ngFor="let cntry of countries | filterNames:countryWorkQuery ">{{cntry.name}}</li>
                 </ul>
                 <span *ngIf="!modalSpinner && (!countries || countries.length<=0)">No country found</span>
                 <span *ngIf="modalSpinner" class="loader">
                     <img src="assets/images/loader.gif" alt="loader">
                 </span>
               </div>
             </div>
       </div>
 </div>
</ng-template>

Tsファイル

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

constructor(
    private modalService: NgbModal
  ) { }

  openModal(modalContent){
     this.modalService.open(modalContent, { centered: true});
   }
0
VIKAS KOHLI