Question

我有安装了bootstrap和jquery的Angular 2项目。我已经通过angular.json中的scripts字段在项目中包含了bootstrap和jquery，如下所示：

"scripts": [
   "node_modules/jquery/dist/jquery.min.js",              
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

我之所以包含bootstrap.bundle的原因是因为bootstrap文档所建议的popper。

我还使用OpenLayers，在ngOnInit方法中，我有以下代码：

const element = document.getElementById('popup');

var popup = new OlOverlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});

this.map.addOverlay(popup);

this.map.on('click', (evt) => {
  var feature = this.map.forEachFeatureAtPixel(evt.pixel,
    function (feature, layer) {
      return feature;
    });
  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    popup.setPosition(coord);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

和html：

<div id='map-stations' class='map'><div id='popup'></div></div>

但是，每当我单击地图的功能时，都会出现以下错误：

jquery__WEBPACK_IMPORTED_MODULE_13__(...).popover is not a function

我包含以下jquery：

import * as $ from 'jquery';

感谢您的帮助。

Answer 1

@mkorunoski别担心，请按照我的步骤

1）安装jQuery。（如果已安装，则跳过）

npm install jquery --save

2）安装jQuery的类型。

npm install @types/jquery --save

3）在 app.module.ts中导入jQuery。

import * as $ from 'jquery';

4）安装bootstrap 3而不是4，因此请删除 angular.json

中的bootstrap.bundle.min.js

npm install bootstrap@3 --save

5）在 angular.json 中添加正确的注入，顺序很重要

"scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

6）在使用openlayers和popover的文件中，将其添加到导入之后

    declare var $: any;

7）现在您可以使用

    $(element).popover('show');

jquery__WEBPACK_IMPORTED_MODULE_13 __（...）。popover不是函数

1 个答案: