Question

我正在尝试让jQuery在我的angular2应用程序中运行。我无法在此发布所有代码，但我会尽量详细说明。任何指针都会受到赞赏。

我的root 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());
    }
}

我正在使用bootstrap datepicker，并且当我点击datepicker类的输入时，我希望触发小部件。但我不能让这个工作。

我可以(<any>jQuery(this.elementRef.nativeElement).hide());工作，但不能使用datepicker事件。

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。

Angular2中的jQuery无法正常工作

1 个答案: