Question

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

到目前为止，我已经将plugins目录添加到我的资产文件夹，并将其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似乎无法正常工作-控制台中显示以下错误：

错误TypeError：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"
]

Answer 1

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

摆脱

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

由于导入jQuery插件脚本会扩展jQuery对象，因此不应导入。

Angular 7-jQuery插件，找不到函数

1 个答案: