Question

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

未捕获的TypeError：jquery__WEBPACK_IMPORTED_MODULE_2 __（...）。popover不是函数

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

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中实现自举弹出窗口？

Answer 1

以这种方式更改组件文件：

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。

您可以使用title，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 popover？

1 个答案: