[英]Angular 2 - Use external library with jquery
I'm using Angular 2 with jQuery and it works well. 我将Angular 2与jQuery结合使用,效果很好。 I'd like to use some external libraries like masonry-layout but i have a problem: 我想使用一些外部库,例如砌体布局,但是我有一个问题:
jQuery(...).masonry() is not a function jQuery(...)。masonry()不是函数
I use webpack to get JQuery work. 我使用webpack来获得JQuery的工作。
new ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
})
test.component.ts 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();
}
}
Any suggestion ? 有什么建议吗? Thanks ! 谢谢 !
Firstly you should change your import to: 首先,您应该将导入更改为:
import 'masonry-layout/dist/masonry.pkgd';
Seems configuration changes don't work for this library: 似乎配置更改对此库无效:
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery' <== this line
}),
So you can try the following: 因此,您可以尝试以下操作:
window.jQuery = jQuery;
import 'masonry-layout/dist/masonry.pkgd';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.