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成员变量类的类型变化

回答

相关问题