Angular 2 - 使用带有 jquery 的外部库答案

【问题标题】：Angular 2 - Use external library with jqueryAngular 2 - 使用带有 jquery 的外部库
【发布时间】：2017-02-17 01:16:44
【问题描述】：

我正在使用 Angular 2 和 jQuery，它运行良好。我想使用一些外部库，例如masonry-layout，但我有一个问题：

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

有什么建议吗？谢谢！

【问题讨论】：

标签： jquery angular typescript webpack

【解决方案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';

【讨论】：