Angular2コンポーネント/ Typescriptを使用してブートストラップ4モーダルを切り替えるには

Question

Typescriptを使用してブートストラップモーダルを切り替えることができません。私はデフォルトのブートストラップ4モーダルを使用しています。ここにコードがあります。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

そして、ここでは、ブートストラップ4が、私は自分のアプリケーションでは、このボタンを使用していないモーダル

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

を切り替えることが提供するボタンです。私は、Angular 2コンポーネントの1つで関数を介してModalを表示したいと考えています。私は次のコードでhtml要素にアクセスしました。

ngOnInit() { 
    this.modalElement = document.getElementById('myModal'); 
    } 

ここで、メソッド呼び出しを使用してそれを表示するには、モーダルをアクティブにする必要があります。私はそれを行うための解決策を見つけようとしていませんでした。私は.show（）と他の解決策のようなメソッドを試しましたが、どれも成功しませんでした。

Answer 1

@ViewChild()デコレータを使用してコンポーネント内のモダルの参照を取得し、jQueryと一緒に使用して.modal()メソッドを呼び出して関数内からモデルを開くことができます。

テンプレート内の任意のローカル変数を宣言します（例：#myModal）。

<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

デコレータ@ViewChild()でコンポーネントで使用します。

import { ViewChild } from '@angular/core'; 
import { ElementRef } from '@angular/core'; 
@Component({ 
    ... 
}) 
export class YourComponent { 
    @ViewChild('myModal') myModal:ElementRef; 

    yourFunction(){ 
    //open modal using jQuery 
    jQuery(this.myModal.nativeElement).modal('show'); 
    } 
} 

.modal()方法は、あなたが（.modalというエラー与えた場合、あなたはケースで、あなたのプロジェクトにhere.

をjQueryのを含めるための手順を見つけることができますが）同じように、あなたのコンポーネントファイルにjQuery変数を宣言し、関数ではありません続く。

declare var jQuery:any; 

@Component({ 
... 
}) 
export class YourComponent{ 
... 
} 

Answer 2

角度2+にシームレスなブートストラップ4インテグレーションを提供する専用ライブラリを使用することをお勧めします。https://ng-bootstrap.github.io/#/components/modalをこのplunkでのライブの例をご確認ください：

@Component({ 
    selector: 'ngbd-modal-component', 
    templateUrl: './modal-component.html' 
}) 
export class NgbdModalComponent { 
    constructor(private modalService: NgbModal) {} 

    open() { 
    const modalRef = this.modalService.open(MyContent); 
    } 
} 

あなたがここに完全なマニュアルを読むことができます：ng-bootstrapは、優れたモーダル実装部品からのコンテンツとモーダルを開くとに沸くところがありhttp://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview

Answer 3

3ステップACCEにViewChildを追加

1. ：ブートストラップモーダルを（表示または非表示）を切り替えるにはコード以下のようなモーダルにSS：

   ヒント：あなたのhtmlでのモーダルを示すためのボタンを追加

   <div class="modal fade" #modal> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <form> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
           <header class="font-12 bold">Modal Header</header> 
          </div> 
          <div class="modal-body"> 
           Your Content ... 
          </div> 
          <div class="modal-footer"> 
           <button type="submit" class="btn btn-primary">Save</button> 
           <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> 
          </div> 
         </form> 
        </div> 
       </div> 
   </div> 
   

2. ：最初の行のコードで#modalに注意してください：

   ヒント：（クリック）= "showModal（）"への通知：

   コンポーネント内部

   <button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button> 
   

3. 、このコードを置く：

   ヒント：

   // jQuery Sign $ 
   declare let $: any; 
   
   @Component({ 
       ... 
   }) 
   export class YourComponent { 
       @ViewChild('modal') modal:ElementRef; 
   
       showModal(){ 
        // Show modal with jquery 
        $(this.modal.nativeElement).modal('show'); 
       } 
   } 
   

：showModal機能とjqueryの記号にアクセス 内部の部品に注目してください