[英]JQuery plugin is not working with Angular 2
as i am new to angular2 i am expecting to find out a solution for the following scenario. 由于我是angular2的新手,所以我希望找到以下情况的解决方案。 The jQuery plugin is not working after getting the data - http://www.owlcarousel.owlgraphic.com/
jQuery插件在获取数据后无法正常工作-http: //www.owlcarousel.owlgraphic.com/
i got issues on *var owl = jQuery(this.elementRef.nativeElement).find('#breif'); 我在* var owl = jQuery(this.elementRef.nativeElement).find('#breif');上遇到问题 owl.owlCarousel();
owl.owlCarousel();
My full code are given bellow 我的完整代码如下
angular 2 component: 角度2分量:
/ beautify ignore:start /
import {Component, OnInit , ElementRef, Inject } from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel';
/ beautify ignore:end /
import {Api} from '../../../../services/api';
declare var jQuery:any;
@Component({
selector: 'breif',
directives: [CAROUSEL_DIRECTIVES],
template: require('./template.html')
})
export class BreifComponent implements OnInit {
elementRef: ElementRef;
breifs: Object;
public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array<any> = [];
constructor(@Inject(ElementRef) elementRef: ElementRef , private api: Api) {
this.elementRef = elementRef
this.loadBreif();
}
ngOnInit() {
**var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();**
}
loadBreif(){
this.api.getBreif().subscribe(
data => {
this.breifs = data.result.articles;
},
err => console.error(err),
() => {
}
)
}
}
template.html template.html
<div class="owl-carousel" id="breif" >
<div class="item" *ngFor="let breif of breifs"><h4>{{breif.title}}</h4></div>
Hi I posted a workaround of using owl owl.carousel@2.1.4 with angular 2.0.0 + webpack + jQuery@3.1.0. 嗨,我发布了使用owl owl.carousel@2.1.4和angular 2.0.0 + webpack + jQuery@3.1.0的解决方法。
Some of the issues I faced was with the jQuery plugin. 我遇到的一些问题与jQuery插件有关。
Please be more specific about the exception/error... 请更详细地说明异常/错误...
First U'll need to install the above^ packages via npm or similar. 首先,您需要通过npm或类似的方法安装上述软件包。 Then --> npm install imports-loader (for using owl within component otherwise u'll get fn is undefined...since third-party modules are relying on global variables like $ or this being the window object...).
然后-> npm install imports-loader(用于在组件中使用owl,否则将无法定义fn ...,因为第三方模块依赖于$等全局变量,或者它是window对象。)。
In case you are using WebPack: 如果您使用的是WebPack:
imports-loader as follow: imports-loader如下:
{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'}
Also u can use jQuery with webpack: 您也可以将jQuery与webpack一起使用:
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
In the plugin section of webpack.common.js: 在webpack.common.js的插件部分中:
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
For images loader: 对于图像加载器:
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file?name=public/img/[name].[hash].[ext]'
}
*public/img -- images folder * public / img-图片文件夹
CSS loader: CSS加载器:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
The vendors.js file should import the following: vendor.js文件应导入以下内容:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
Please be aware that owl.carousel 2 is still use andSelf () deprecated function of jQuery so we need to replace them with the new version of addBack (). 请注意,owl.carousel 2仍使用jQuery和self ()不推荐使用的功能,因此我们需要用新版本的addBack ()替换它们。
Goto node_modules folder in the owl package dist/owl.carousel.js: replace all the occurrences of andSelf () with --> addBack (). 转到node_modules在猫头鹰包DIST / owl.carousel.js文件夹中:替换andSelf(与所有出现) - > 回加 ()。
Now is the angular 2 part: 现在是角2部分:
owl-carousel.ts: owl-carousel.ts:
import {Component} from '@angular/core';
@Component({
selector: 'carousel',
templateUrl: 'carousel.component.html',
styleUrls: ['carousel.css']
})
export class Carousel {
images: Array<string> = new Array(10);
baseUrl: string = './../../../../public/img/650x350/';
}
carousel.component.ts:
import { Component, Input, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
@Component({
selector: 'owl-carousel',
template: `<ng-content></ng-content>`
})
export class OwlCarousel implements OnDestroy, AfterViewInit{
@Input() options: Object;
$owlElement: any;
defaultOptions: Object = {};
constructor(private el: ElementRef) {}
ngAfterViewInit() {
for (var key in this.options) {
this.defaultOptions[key] = this.options[key];
}
var temp :any;
temp = $(this.el.nativeElement);
this.$owlElement = temp.owlCarousel(this.defaultOptions);
}
ngOnDestroy() {
this.$owlElement.data('owlCarousel').destroy();
this.$owlElement = null;
}
}
carousel.component.html: carousel.component.html:
<owl-carousel class="owl-carousel"[options]="{navigation: true, pagination: true, rewindNav : true, items:2, autoplayHoverPause: true, URLhashListener:true}">
<div class="owl-stage" *ngFor="let img of images; let i=index">
<div class="owl-item">
<a href="#"><img src="{{baseUrl}}{{i+1}}.png"/></a>
</div>
</div>
</owl-carousel>
Make sure to bootstrap everything in the app.module: 确保引导app.module中的所有内容:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {OwlCarousel} from './components/carousel/carousel.component';
import {Carousel} from './components/carousel/owl-carousel';
@NgModule({
imports: [
BrowserModule,
NgbModule,
],
declarations: [
AppComponent,
OwlCarousel,
Carousel
],
providers: [appRoutingProviders],
bootstrap: [ AppComponent ]
})
export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.