隠すと、私はNG2モーダルそれは、 私のテンプレートを開いたり、TSを通じて隠す取得されていない使用

Question

angular2に

<modal id='saveeditsmodal'> 
    <modal-header> 
     <h4 class="modal-title">Editing item(s) in Recently Viewed</h4> 
     </modal-header> 
     <!-- Modal content--> 
     <modal-content> 
     <div class="modal-body"> 
      <p>You have unsaved changes.</p> 
     </div> 
     <div class="modal-body"> 
      <p>Are you sure you want to discard these changes?</p> 
     </div> 
       </modal-content> 
    <modal-footer> 
      <button type="button" class="btn btn-primary" data-dismiss="modal">Stay On List</button> 
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)='closebox()'>Discard</button> 
    </modal-footer> 
    </modal> 

マイTS、実際

$('#saveeditsmodal').show(); 

をモーダルボックスを表示する方法これはng2モデルです、私は非表示や表示するプロセスについては分かりません、誰も助けを提案することができます。ありがとう。

Answer 1

Angular2を使用している場合は、可能な限りjQueryを使用しないようにしてください。

モダールなコンポーネントを提供するng2-bootstrapモジュールを実際に使用している場合は、次のことを考慮する必要があります。

ng2-bootstrapから既存のModalModuleを拡張して、独自のモーダル実装を作成します。

のみ、たとえばあなたができるので、それは目に見える、*ngIf="variableName"を使用してあります。

function show() { 
    this.variableName = true 
} 

コンポーネントの一部として。あなたはモーダルを使用するコンポーネント、そのようViewChildを追加で次に

：

@ViewChild('componentID') modalCmp: ModalComponent

あなたのHTMLは次のようになります。

<modal #componentID></modal>

あなたは可能性が完全にコンポーネントを拡張してアップグレードするには、@Input()と@Output()という変数を追加して、その動作を操作します。

コード/コンポーネントでは、modalCmpを参照できます。たとえば、

function showMyModal() { 
    this.modalCmp.show() 
} 

その他ご不明な点がございましたら、お気軽にお問い合わせください。 Angular2のモジュールローダーを使用して、モーダルコンポーネントを宣言してインポートすることを忘れないでください。

Answer 2

私は彼が開くように、2つのパブリック関数を使用している見ることができるようにし、近い

open(...args: any[]) { 
     if (this.isOpened) 
      return; 

     this.isOpened = true; 
     this.onOpen.emit(args); 
     document.body.appendChild(this.backdropElement); 
     window.setTimeout(() => this.modalRoot.nativeElement.focus(), 0); 
     document.body.className += " modal-open"; 
    } 

    close(...args: any[]) { 
     if (!this.isOpened) 
      return; 

     this.isOpened = false; 
     this.onClose.emit(args); 
     document.body.removeChild(this.backdropElement); 
     document.body.className = document.body.className.replace(/modal-open\b/, ""); 
    } 

あなたはモーダルと直接対話しようとすることができます：あなたの方法であるよう

$('#myModal').modal('toggle'); 
$('#myModal').modal('show'); 
$('#myModal').modal('hide'); 

はちょうどそれを追加。やっての

Answer 3

良い方法は次のとおりです。

テンプレートサイド：

<modal id='saveeditsmodal' #saveEditModal> 
..... 
</modal> 

<button (click)='saveEditModal.open()'>Show Modal</button> 
<button (click)='saveEditModal.close()'>Hide Modal</button> 

部品面：// githubの：

@ViewChild('saveEditModal') saveEditModal; 
...... 
this.saveEditModal.open(); 
this.saveEditModal.close();