Angular2 中的 jQuery 不工作

Question

我正在尝试让 jQuery 在我的 angular2 应用程序中工作。我无法在这里发布我的所有代码，但我会尽力详细说明。任何指示将不胜感激。

我的根 app.ts 文件看起来与此类似

/// <reference path="../../typings/jquery/jquery.d.ts" />
import {Component,provide,DynamicComponentLoader,Injector,OnInit,AfterViewInit,ViewEncapsulation} from 'angular2/core';

declare var jQuery:JQueryStatic;

@Component({
    selector: 'app',
    templateUrl: './app/app.html',
    encapsulation: ViewEncapsulation.None
})

export class app implements OnInit,AfterViewInit{
 constructor(private elementRef: ElementRef)
ngOnInit() {
        this.dcl.loadIntoLocation(HeaderComponent, this.elementRef, 'header');
        this.dcl.loadIntoLocation(FooterComponent, this.elementRef, 'footer');
    }
    ngAfterViewInit() {
           (<any>jQuery(this.elementRef.nativeElement).find('.datepicker').datepicker());
    }
}

我正在使用引导日期选择器，并希望当我单击带有 datepicker 的输入时小部件会触发类(class)。但我无法让它发挥作用。

我可以获得(<any>jQuery(this.elementRef.nativeElement).hide());工作但不工作日期选择器事件。

Answer 1

如果没有 app.html 文件的内容，很难帮助您做到这一点;-)

我实现了一个指令来包装 jquery datepicker:

@Directive({
  selector: '[datepicker]'
})
export class DatepickerDirective {
  @Output()
  change:EventEmitter<string> = new EventEmitter();

  constructor(private elementRef:ElementRef) {
  }

  ngOnInit() {
    $(this.elementRef.nativeElement).datepicker({
      onSelect: (dateText) => {
        this.change.emit(dateText);
      }
    });
  }
}

我这样应用:

<input type="date" datepicker/>

有关更多详细信息，请参阅此问题:

• Change event with jQuery datepicker and Angular 2

还有这个 plunkr:https://plnkr.co/edit/TVk11FsItoTuNDZLJx5X?p=preview .