Angular 2-将外部库与jquery一起使用

Question

我将Angular 2与jQuery结合使用，效果很好。 我想使用一些外部库，例如砌体布局，但是我有一个问题：

jQuery（...）。masonry（）不是函数

我使用webpack来获得JQuery的工作。

new ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery',
  })

test.component.ts

import { Component } from '@angular/core';

import 'masonry-layout';

@Component({
    selector: 'test',
    template: `
        <div class="container-fluid grid">
            <div class="grid-item">...</div>
            <div class="grid-item">...</div>
            <div class="grid-item">...</div>
            <div class="grid-item">...</div>
        </div>
    `
})
export class TestComponent {
    ngOnInit() {
        jQuery('.grid').masonry();
    }
}

有什么建议吗？ 谢谢 ！

Answer 1

首先，您应该将导入更改为：

import 'masonry-layout/dist/masonry.pkgd';

似乎配置更改对此库无效：

new webpack.ProvidePlugin({
  jQuery: 'jquery',
  $: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery' <== this line
}),

因此，您可以尝试以下操作：

window.jQuery = jQuery;
import 'masonry-layout/dist/masonry.pkgd';