时间戳

首页 > 解决方案 > Angular 7 - jQuery插件，找不到功能

javascript - Angular 7 - jQuery插件，找不到功能

问题描述

我目前正在尝试使用一个名为cube的 jQuery 插件。

到目前为止，我已将 plugins 目录添加到我的 assets 文件夹中，将其 JS 和 CSS 添加到angular.json，并尝试了以下操作：

import { Component, OnInit } from '@angular/core';
import * as AOS from 'aos';
import * as $ from 'jquery';
import * as cubeportfolio from 'src/assets/cubeportfolio/js/jquery.cubeportfolio.js';


@Component({
  selector: 'app-all',
  templateUrl: './all.component.html',
  styleUrls: ['./all.component.scss']
})
export class AllComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    AOS.init();

    $('#js-grid-masonry').cubeportfolio({
      filters: '#js-filters-masonry',
      layoutMode: 'grid',
      defaultFilter: '*',
      animationType: 'slideDelay',
      gapHorizontal: 20,
      gapVertical: 20,
      gridAdjustment: 'responsive',
      mediaQueries: [{
        width: 1500,
        cols: 5,
      }, {
        width: 1100,
        cols: 4,
      }, {
        width: 800,
        cols: 3,
      }, {
        width: 480,
        cols: 2,
        options: {
          caption: '',
          gapHorizontal: 10,
          gapVertical: 10,
        }
      }],
      caption: 'overlayBottomAlong',
      displayType: 'bottomToTop',
      displayTypeSpeed: 100,

      // lightbox
      lightboxDelegate: '.cbp-lightbox',
      lightboxGallery: true,
      lightboxTitleSrc: 'data-title',
      lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
    });

  }

}

不知何故，JS 似乎不起作用 - 控制台中出现以下错误：

错误类型错误：jquery__WEBPACK_IMPORTED_MODULE_3__(...).cubeportfolio 不是函数。




进一步的代码：

"styles": [
    "src/assets/cubeportfolio/css/cubeportfolio.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "src/assets/cubeportfolio/js/jquery.cubeportfolio.min.js"
]

标签： javascriptjqueryangular

解决方案

如果你真的决定引入 jQuery 的痛苦，请使用 ngAfterViewInit，而不是 ngOnInit，因为 DOM 还不存在。

摆脱

import * as cubeportfolio from 'src/assets/cubeportfolio/js/jquery.cubeportfolio.js';

因为导入 jQuery 插件脚本扩展了 jQuery 对象并且不应该被导入。

推荐阅读