- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
由于我是 angular2 的新手,我希望找到以下场景的解决方案。获取数据后 jQuery 插件无法工作 - http://www.owlcarousel.owlgraphic.com/
我在 *var owl = jQuery(this.elementRef.nativeElement).find('#breif'); 上遇到问题 owl.owlCarousel();
我的完整代码如下
Angular 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),
() => {
}
)
}
}
模板.html
<div class="owl-carousel" id="breif" >
<div class="item" *ngFor="let breif of breifs"><h4>{{breif.title}}</h4></div>
最佳答案
您好,我发布了使用 owl owl.carousel@2.1.4 和 Angular 2.0.0 + webpack + jQuery@3.1.0 的解决方法。
我遇到的一些问题与 jQuery 插件有关。
请更具体地说明异常/错误...
首先,您需要通过 npm 或类似方式安装上述^ 软件包。然后 --> npm install imports-loader(在组件中使用 owl ,否则你会得到 fn 未定义...因为第三方模块依赖于像 $ 这样的全局变量或者这是 window 对象...)。
如果您使用 WebPack:
导入加载程序如下:
{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'}
你也可以将 jQuery 与 webpack 一起使用:
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
在 webpack.common.js 的插件部分:
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
对于图像加载器:
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file?name=public/img/[name].[hash].[ext]'
}
*public/img -- 图像文件夹
CSS 加载器:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
vendors.js 文件应导入以下内容:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
请注意,owl.carousel 2 仍然使用 jQuery 的 andSelf() 已弃用函数,因此我们需要用新版本的 addBack() 替换它们。
转到 owl 包 dist/owl.carousel.js 中的 node_modules 文件夹:将所有出现的 andSelf() 替换为 --> addBack()。
现在是 Angular 2 部分:
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:
<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>
确保引导 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 { }
关于javascript - JQuery 插件不适用于 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38781972/
我是一名优秀的程序员,十分优秀!