Question

我试图在我的一个Angular2项目中使用packery。但是我似乎无法让它在指令中工作。这是我的packery.directive.ts文件

/// <reference path="../../../typings/packery/packery.d.ts" />

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[packery]'
})

export class Packery {

  constructor(el: ElementRef) {
    jQuery(el.nativeElement).packery({
      itemSelector: '.grid-item',
      gutter: 10
    });
  }
}

虽然代码在没有选项的情况下使用时初始化，但代码不起作用。即。

.....
export class Packery {

  constructor(el: ElementRef) {
    jQuery(el.nativeElement).packery();
  }
}

但是，通过选项，我会收到错误

Supplied parameters do not match any signature of call target.

typing文件已经将类型声明为可选。

declare module "packery" {
interface PackeryOptions {
    itemSelector?: string;
    gutter?: number;
......................

如果有人能引导我在TypeScript中正确实现jQuery插件的方向，请感谢它。感谢。

Answer 1

我终于使用https://stackoverflow.com/a/34570534/6070591

上发布的解决方案解决了问题

我当前的指令代码

import { Directive, ElementRef, Inject, OnInit } from '@angular/core';

declare var jQuery: any;

@Directive({
  selector: '[packery]'
})

export class Packery implements OnInit {
  elementRef: ElementRef;

  constructor( @Inject(ElementRef) elementRef: ElementRef) {
    this.elementRef = elementRef;
  }


  ngOnInit() {
    jQuery(this.elementRef.nativeElement).packery({
      // options
      itemSelector: '.grid-item',
      gutter: 10
    });
  }

}

Answer 2

您可能需要导入它或检查版本兼容性：

来自常见问题解答：https://docs.angularjs.org/misc/faq

Angular是否使用jQuery库？

是的，Angular可以在应用程序被引导时在您的应用程序中使用jQuery。如果你的脚本路径中没有jQuery，Angular会回退到我们称之为jQLite的jQuery子集的实现。

Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能与Angular正常工作，但我们不能保证。

如何在Angular2中使用jQuery插件？

2 个答案: