ユーザーがポップアップを外側にクリックするとAngular4のポップアップが閉じられますか？

Question

は私がangular4でポップアップモーダルため、このチュートリアルの後：私はモーダルの外側をクリックした場合

http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

を、モーダルが消えます。しかし、ユーザーが閉じるアイコンをクリックするまで、モーダルが消えることは望ましくありません。ここで

はモーダルのOnInitである：ここで

ngOnInit(): void { 
     let modal = this; 

     // ensure id attribute exists 
     if (!this.id) { 
      console.error('modal must have an id'); 
      return; 
     } 

     // move element to bottom of page (just before </body>) so it can be displayed above everything else 
     this.element.appendTo('body'); 

     // close modal on background click 
     this.element.on('click', function (e: any) { 
      var target = $(e.target); 
      if (!target.closest('.modal-body').length) { 
       modal.close(); 
      } 
     }); 

     // add self (this modal instance) to the modal service so it's accessible from controllers 
     this.modalService.add(this); 
    } 

は、私が実際に持っているもののplunkerです： https://plnkr.co/edit/gPCTvV?p=preview

Answer 1

だけPlunker LINK

更新 app/_directives/modal.component.ts

// close modal on background click 
    this.element.on('click', function (e: any) { 
     var target = $(e.target); 
     if (!target.closest('.modal-body').length) { 
      modal.close(); 
     } 
    }); 

からこれを削除します

更新

あなたは物質的な対話を利用したり、ブートストラップモーダルを利用することができます。

材料対話ライブの場合は、この動作を確認してlinkと連絡先をクリックしてください。

また、あなたは、あなたがこのplunkerをチェックアウト外クリックしたときに、モーダルが閉じられたくないあなたのためにこのangular materail link

を確認することができます。それはデモ働いたこのanswer

は、ブートストラップモーダルチェックを使用するにはあまりにも良い練習は、私はこのチュートリアルではお勧めしませんされていないようなことのために、角の内側にはJQueryを使用して