jquery - 如何使用 jquery 在 Angular 7 中使用 bootstrap popover？

Question

我正在尝试在 angular7 中使用 jquery 实现 bootstrap4 popover。我已将“popper.js”包含在index.html 中，并包含使用npm。但它不起作用。

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).popover is not a function

此错误仅出现在控制台中。

HTML:(sample.component.html)

<button id="option2" autocomplete="off" data-toggle="popover"> Public</button>

Jquery:(sample.component.ts)

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

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

  constructor() { }   
  ngOnInit() {   
    $(document).ready(function(){   
      $('[data-toggle="popover"]').popover();     
      $('#option2').popover({
         html: true,
        content: function() {
          return $("#div").html();
        },
         placement: 'bottom'
      });            
    });
  }

如何在 Angular 7 中实现 Bootstrap Popover？

Answer 1

注意:正如 @ErikHer 所暗示的那样，在 Angular 中使用 jQuery 并不是一个好的做法。在这种情况下有趣的是使用 ng-bootstrap库，这是一个按照 Angular 标准开发的库，其元素为 Bootstrap 4 或更低。您还可以使用 Bootstrap 5，他们不再使用 jQuery。

无论如何，下面的方法是可行的，但不推荐。

感谢@ErikHer 让答案更加完整。

<小时/>

将组件文件更改为这种方式:

import { Component, OnInit } from '@angular/core';
declare var $: any; // ADD THIS
import * as $ from 'jquery';

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

  constructor() { }   
  ngOnInit() {   
    $('[data-toggle="popover"]').popover();
  }

您不需要使用 $(document).ready() 因为 NgOnInit() 会做同样的事情。$('[data-toggle="popover"]').popover(); 将启动组件中的所有 Popover。

您可以使用标题、数据放置和数据内容属性来使 Popover 如下所示:

<button id="option2" autocomplete="off" data-toggle="popover" data-placement="bottom" title="popover's title" data-content="popover's text"> Public</button>

或者您可以使用您在 NgOnInit() 中使用的函数初始化弹出窗口:

$('#option2').popover({
         html: true,
        content: function() {
          return $("#div").html();
        },
         placement: 'bottom'
      }); 

希望这有帮助。