外側をクリックしたときにのみ日付ピッカーを非表示

Question

私はangular2アプリケーションでng2-bootstrap datepickerを使用しています。そして、私は外側をクリックすると、datepickerのポップアップを隠したいと思います。私はこのquestionで提案された解決策を試しました。

しかし、それは正しく機能しません。日付を選択するか月/年のダイアログに切り替えると、datepickerが閉じられます。

調査の結果、この問題の原因は、clickで返されたイベントターゲットが最初は要素refになく、datepickersコンポーネント実装でngIfをクリックして取得されたということです。

ここには、問題を解決するplunkerがあります。

これを解決する方法を教えてください。

Answer 1

クリックイベントをmousedownに変更する必要があります。

import {Component, Input, Output, ElementRef} from '@angular/core'; 

@Component({ 
    selector: 'my-datepicker', 
    host: { 
     '(document:mousedown)': 'onClick($event)', 
    }, 
    template: ` 
     <label>{{label}}</label> 
     <input [(ngModel)]="dateModel" class="form-control" (focus)="showPopup()" /> 
     <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true"></datepicker> 
    `, 
    styles: [` 
    .popup { 
     position: absolute; 
     background-color: #fff; 
     border-radius: 3px; 
     border: 1px solid #ddd; 
     height: 251px; 
    } 
    `], 
}) 
export class DatepickerComponent { 
    @Input() dateModel: Date; 
    private showDatepicker: boolean = false; 

    constructor(private _eref: ElementRef) { } 

    showPopup() { 
     this.showDatepicker = true; 
    } 

    onClick(event) { 
     if (!this._eref.nativeElement.contains(event.target)) { 
      this.showDatepicker = false; 
     } 
    } 
} 

Check out this plunker

Answer 2

あなたは、ウィンドウ上のクリックイベントにリスナーを添付することができます。これにより、すべてのクリックがキャプチャされます。

クリック時に日付ピッカーが閉じないようにするには、リスナーをdatepicker（または日付ピッカーを閉じるべきではない要素）に追加し、MouseEventでstopPropagationを呼び出します。ここで

constructor(private el: ElementRef) { 
    this.el.nativeElement.onclick = (ev: MouseEvent) => { 
     ev.stopPropagation(); //Do not close Datepicker 
    }; 
    window.addEventListener("click", this.handleClick); 
} 

handleClick = (ev: MouseEvent) => { 
    this.showDatepicker = false; 
}; 

ngOnDestroy() { //Do not forget to remove the listener 
    window.removeEventListener("click", this.handleClick); 
} 

Answer 3

私が行っている、非常に迅速かつシンプルなソリューション、あなたのcomponent.tsで

HTMLファイル内

<div class="input-group"> 
     <input class="form-control" placeholder="yyyy-mm-dd" 
      name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled" #datepicker="ngbDatepicker"> 
     <button class="input-group-addon" (click)="d.toggle()" type="button"> 
     <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
     </button> 
    </div> 

は

ファイルであります

// local reference varible of datepicker input 
@Viewchild('datepicker') datepicker; 

// listen to document click event and handle closeDponOutsideClick event 
@HostListener('document:click', ['$event']) 
closeDponOutsideClick(event) { 
if (event.target.offsetParent !== null && event.target.offsetParent.tagName !== 'NGB-DATEPICKER') { 
this.datepicker.close(); 
    } 
} 

説明：ドキュメントのクリックイベントをリッスンし、ターゲットオフセットの親要素がnullではなく、タグ名が「NGB-DATEPICKER」と等しくないことを確認します。これは、datePickerの外部クリックが常に異なるoffsetParent名前は「NGB-DATEPICKER」よりも大きい。

これは誰かを助けることを望みます。