typescript成員變量類的類型變化

我正在包裝jquery的datepicker在angular2中使用，我遇到了一個成員變量的類以某種方式變化的情況。作爲參考，我是這裏的初學者。typescript成員變量類的類型變化

首先，這裏是代碼（基於例如從http://www.radzen.com/blog/jquery-plugins-and-angular/ ）：

import { forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef, AfterViewInit, OnDestroy, Component} from '@angular/core'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 

import * as $ from "jquery"; 
import 'jqueryui'; 

const DATE_PICKER_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => DatePickerComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'qnet-datepicker', 
    template: `<input #input type="text">`, 
    providers: [DATE_PICKER_VALUE_ACCESSOR] 
}) 
export class DatePickerComponent implements AfterViewInit, ControlValueAccessor, OnDestroy { 
    private onTouched =() => {}; 
    private onChange: (date: Date) => void =() => {}; 

    @Input() date: Date; 
    @Input() options: any = {}; 
    @Output() dateChange = new EventEmitter(); 

    @ViewChild('input') input: ElementRef; 

    constructor() { 
     this.date = new Date(); 
    } 

    writeValue(date: Date) { 
     if(!date) { 
      return; 
     } 
     this.date = date; 
     $(this.input.nativeElement).datepicker('setDate', this.date) 
    } 

    registerOnChange(fn: any) { 
     this.onChange = fn; 
    } 

    registerOnTouched(fn: any) { 
     this.onTouched = fn; 
    } 

    ngAfterViewInit() { 
     $(this.input.nativeElement).datepicker(Object.assign({}, this.options, { 
      onSelect: (dateStr: string) => { 
//    this.date = $(this.input.nativeElement).datepicker('getDate'); 
//    this.onChange(this.date); 
       this.onTouched(); 
       this.dateChange.next(this.date); 
      } 
     })) 
console.log('date is ' + this.date) 
     $(this.input.nativeElement).datepicker('setDate', this.date) 
    } 

    ngOnDestroy() { 
     $(this.input.nativeElement).datepicker('destroy'); 
    } 
}

在構造函數中的this.date類型是「日期」，但通過一次我去ngAfterViewInit類型有以某種方式更改爲「DatePickerComponent」。這怎麼會發生？

編輯

附加信息：使用日期選擇器的HTML是像

<qnet-datepicker #startDate [date]="startDate" (dateChange)="updateStart(startDate.date, startTime.value)"></qnet-datepicker>

由於艾哈邁德介紹了他的答案，這結束了意外綁定成員變量的元素，而不是日期。我的一部分混亂是依賴於打字強烈類型，但HTML和邏輯之間的連接是通過JavaScript完成的，因此不再具有強類型的屬性。

來源

2017-05-08 ryan0270

讓你的代碼工作在一個plunker .. http://plnkr.co/edit/4Dkgca3k7Hzms27N6kmf?p=preview你在哪裏看到'this.date'被更改爲'DatePickerComponent'？我檢查它是否屬於日期並且返回true。 –

真棒，謝謝！在ngAfterViewInit（）開始時，它報告爲一個DatePickerComponent（根據chrome） – ryan0270

你可以派生plunker並添加一個日誌語句，你說類型是DatePickerComponent嗎？ –

看看github repo後，這個問題是這樣的：

daterangepicker.component.ts 線12 <qnet-datepicker #startDate [date]="startDate" (dateChange)="updateStart(startDate.date, startTime.value)"></qnet-datepicker>

的input[date]通過模板引用變量取到組件本身的引用#startDate

刪除可修復此問題。

來源

2017-05-08 21:40:29

typescript成員變量類的類型變化

回答

相關問題