Question

如何从angular cli正确安装bootstrap 4以使所有引导程序组件都能正常工作？

我使用了以下命令：

npm install --save jquery
npm install --save popper.js
npm install --save bootstrap

并在 angular-cli.json 文件中配置以下内容：

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

popover和工具提示不起作用..但bootstrap css正在运行！

谢谢！

Answer 1

Tooltips出于性能原因选择加入，因此您需要为元素调用它：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

但是，这只会在调用时在上显示的元素上设置工具提示。因此，如果您在应用加载时调用此方法，则所有组件中的元素尚不存在。我想你需要在NgAfterViewInit中调用它，你可能需要一个ViewChild作为元素。

更好的方法是创建一个指令，在指令所在的任何组件上调用它（stackblitz link）......

import { Directive, ElementRef } from '@angular/core'; declare var $: any; // https://angular.io/guide/attribute-directives @Directive({ selector: '[appTooltip]' }) export class TooltipDirective { constructor(er: ElementRef) { $(er.nativeElement).tooltip(); } }

HTML：

<button data-placement="top" title="Tooltip on top" appTooltip> This button has a tooltip </button>

Bootstrap 4.1 in angular 4

1 个答案: