Angular2的HTML標記綁定到布爾標誌，並在假時調用方法

我正在嘗試爲用戶在外面點擊時關閉日期選擇器的angular2引導程序datepicker編寫解決方法。Angular2的HTML標記綁定到布爾標誌，並在假時調用方法

我有工作在那裏點擊外註冊並在這裏翻轉一個布爾標誌：

@Component({ 
    selector: 'ngbd-datepicker-popup', 
    templateUrl: 'app/component/datepicker/datepicker.html', 
    host: { 
     '(document:click)': 'handleClick($event)' 
    } 
}) 

export class NgbdDatepickerPopup { 

    private showDatePicker: boolean = true; 


    constructor(private elementRef: ElementRef) {} 



    handleClick(event: any) { 
     if (!this.elementRef.nativeElement.contains(event.target)) { 
      this.showDatePicker = false; 
     } 
    } 

}

唯一的問題是，我不知道從那裏做關閉日期選擇器。我需要從標記中調用close()方法，因爲這是我的datepicker聲明的地方。

下面是帶有註釋標記：

<form class="form-inline" bindToBooleanFlagHere="d.close()"> <!--if true, close the popup --!> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1" 
       name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker"> <!-- datepicker declared here --!> 
      <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()"> 
       <i class="glyphicon calendar"></i> 
      </div> 
     </div> 
    </div> 
</form>

我的日期選擇對象是在HTML標記聲明爲d這裏和外部的點擊次數在打字稿註冊。這些外部點擊將我的布爾標誌翻轉爲假。

所以我需要我的html來觀看這個布爾標誌並在showDatePicker爲false時調用d.close()方法。

來源

2017-04-05 Nathan Foss

黑客對黑客

黑客我不知道如果我這個解決方案感到驕傲，但是這整個問題的出現是因爲Angular2引導Datepickers不支持這種行爲。

因此，這裏是我所做的：

首先，基於重複關閉布爾標誌的HTML標記。

<form class="form-inline" *ngIf="showDatePicker"> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1" 
        name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker"> 
      <div *ngIf="date != null" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="clearDate()"><i class="glyphicon remove"></i> 
      </div> 
      <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()"> 
       <i class="glyphicon calendar"></i> 
      </div> 
      <div *ngIf="disableThis" class="input-group-addon" style="background-color: white; cursor: pointer"> 
       <i class="glyphicon calendar"></i> 
      </div> 
     </div> 
    </div> 
</form> 
<form *ngIf="!showDatePicker" class="form-inline" (mousemove)="d.close(); resetShowDatePicker();"> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1" 
        name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker"> 
      <div *ngIf="date != null" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="clearDate()"> 
       <i class="glyphicon remove"></i> 
      </div> 
      <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()"> 
       <i class="glyphicon calendar"></i> 
      </div> 
      <div *ngIf="disableThis" class="input-group-addon" style="background-color: white; cursor: pointer"> 
       <i class="glyphicon calendar"></i> 
      </div> 
     </div> 
    </div> 
</form>

當showDatePicker是假的，密切的功能發生在mousemove這給日期選擇器關閉，一旦發生點擊的外觀。然後布爾標誌重置爲true，以便用戶可以無縫地再次打開它。

而這裏的組件代碼：

handleClick(event: any) { 
    if (this.elementRef.nativeElement.parentElement.contains(event.target) || 
     event.target.className === 'glyphicon calendar') { 
     // glyphicon calendar is the class name of the button icon that opens the datepicker 
     this.showDatePicker = true; 
    } else { 
     this.showDatePicker = false; 
    } 
} 

resetShowDatePicker(): void { 
    this.showDatePicker = true; 
}

來源

2017-04-06 14:25:39

獲取組件的引用，然後調用close它

@ViewChild(NgbDatePicker) popup:NgbdDatepickerPopup; 

handleClick() { 
    if (!this.elementRef.nativeElement.contains(event.target)) { 
    this.popup.close(); 
    } 
}

我不知道如果@ViewChild()線是正確的，因爲我不完全理解你的代碼。

來源

2017-04-05 19:18:06

你對我的代碼的任何具體問題？你不明白什麼？ –

你想調用'close（）'的什麼組件。 –

'd'在這裏被聲明爲'ngbDatepicker＃d =「ngbDatepicker」'作爲ngbDatepicker對象。所以，當一個事件被觸發時，它會關閉日期選擇器 –

Angular2的HTML標記綁定到布爾標誌，並在假時調用方法

回答

相關問題