Как использовать boottrap popover в angular 7 с помощью jquery? - PullRequest
Новая
       18

Как использовать boottrap popover в angular 7 с помощью jquery?

1 голос
/ 14 марта 2019

Я пытаюсь реализовать загрузчик bootstrap4, используя jquery в angular7.Я включил "popper.js" в index.html и также включил использование npm.но это не работает

Uncaught 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'
      });            
    });
  }

Как добиться загрузки при начальной загрузке в угловых 7?

1 Ответ

1 голос
/ 30 мая 2019

Измените свой файл компонента следующим образом: 

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'
      });

Надеюсь, это поможет.

...