如何使用 jquery 在 angular 7 中使用 bootstrap 弹出窗口？

Question

我正在尝试在 angular7 中使用 jquery 实现 bootstrap4 弹出窗口。我已将 "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 弹出窗口？

Answer 1

注意：在Angular中使用jQuery并不是@ErikHer暗示的好习惯。在这种情况下有趣的是使用 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。

您可以使用标题、data-placement 和 data-content 属性来使 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'
      });

希望对您有所帮助。

如何使用 jquery 在 angular 7 中使用 bootstrap 弹出窗口？

How to use bootstrap popover in angular 7 using jquery?

jquery

popover

bootstrap-4

angular7