ngx-owl-carousel无法在Angle 7 Web应用程序中正常工作

时间：2019-03-31 14:48:02

标签： angular carousel

我已经为我的角度Web应用程序安装了ngx-owl-carousel。

代码如下：

 <owl-carousel [options]="{items: 3, dots: false, navigation: false}" [items]="images" [carouselClasses]="['owl-theme', 'row', 'sliding']">
        <div class="item" *ngFor="let image of images;let i = index">
          <div class="thumbnail-image"><img [src]="image" /></div>
        </div>
      </owl-carousel>

和ts文件中的

export class LandingPageComponent implements OnInit {
  images: Array<any> = [];
  defaultOptions: any = {};

  constructor(private router: Router) {
    this.images = [
      'app/components/landing-page/images/partner_cac.png',
      'app/components/landing-page/images/partner_cac.png',
      'app/components/landing-page/images/partner_cac.png'
    ];
  }
  ngOnInit() {

  }

以及在angular.json文件中

 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/owl.carousel/dist/owl.carousel.min.js",

"styles": [
              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/app/styles/base.scss",
              "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
              "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
            ],
            "scripts": [

在app.module.ts中，我也导入了该模块

但是如果我运行此Web应用程序；我收到此错误：

OwlCarousel.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…}}component: (...)componentRenderElement: (...)context: (...)elDef: {nodeIndex: 1, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}elOrCompView: (...)elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: OwlCarousel, …}injector: (...)nodeDef: {nodeIndex: 3, parent: {…}, renderParent: {…}, bindingIndex: 2, outputIndex: 0, …}nodeIndex: 3providerTokens: (...)references: (...)renderNode: (...)view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: OwlCarousel, …}__proto__: Object
View_OwlCarousel_0 @ OwlCarousel.html:1
proxyClass @ compiler.js:18239
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24139
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15777
(anonymous) @ core.js:18126
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18126
(anonymous) @ core.js:18010
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17213
next @ core.js:18010
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
checkStable @ core.js:17268
onHasTask @ core.js:17312
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1781
load (async)
customScheduleGlobal @ zone.js:1883
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:264
(anonymous) @ zone.js:2054
desc.set @ zone.js:1393
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.ResourceLoaderImpl.get @ platform-browser-dynamic.js:334
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._fetch @ compiler.js:16173
(anonymous) @ compiler.js:16295
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._loadMissingExternalStylesheets @ compiler.js:16295
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._normalizeTemplateMetadata @ compiler.js:16243
(anonymous) @ compiler.js:16200
then @ compiler.js:2421
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate @ compiler.js:16200
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata @ compiler.js:18392
(anonymous) @ compiler.js:26036
(anonymous) @ compiler.js:26035
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:26032
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:26010
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:25970
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_R3__ @ core.js:17619
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17802
./src/main.ts @ main.ts:19
__webpack_require__ @ bootstrap:78
0 @ main.ts:20
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 3 more frames
core.js:15724 ERROR TypeError: a(...).find(...).andSelf is not a function
    at c.<anonymous> (owl.carousel.min.js:2)
    at HTMLElement.i (jquery.min.js:2)
    at HTMLElement.dispatch (jquery.min.js:2)
    at HTMLElement.y.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at e.push../src/app/components/landing-page/js/owl.carousel.min.js.e.trigger (owl.carousel.min.js:1)

我尝试通过Google解决此问题，但是找不到正确的方法。

也许你可以帮助我。

最好的问候，

狮子座

1 个答案:

答案 0 :(得分：0)

看起来您正在使用它的库从jQuery库中调用andSelf方法。不推荐使用此方法，而推荐使用addBack。

我建议您更新依赖关系，以确保您使用的是库的最新受支持和兼容版本。

如果它不起作用，您可以：

  1. 编辑源代码-转到 owl.carousel.min.js 文件，并将所有andSelf替换为addBack。

  2. 猴子补丁jQuery -在jQuery对象上声明一个新函数，该函数将委派给现有的addBack方法。为此，您必须在owl-carousel尝试调用该函数之前创建该函数。您可以在app.module.ts文件中执行此操作，也可以在比owl-carousel早的任何其他位置执行此操作。

    $.fn.andSelf = function() {
  return this.addBack.apply(this, arguments);
}

在此github issue中找到了后面的代码段，但应该可以解决，因此，我建议仔细检查您的依赖版本。

相关问题
最新问题