Angular 5 + Popper.JS

Question

我正在尝试启动需要Popper.Js功能的培训项目.但是,它似乎并没有让我开始使用Popper.Js.

根据Bootstrap的文档,我开始使用Popper.Js

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

我在主要组件中使用它ngOnInit.但是,它不起作用.发生错误" 属性'工具提示'在类型'JQuery'上不存在 ".我导入了jquery和bootstrap包文件.安装所有库的类型.

我也试过纯粹的"popper.js"而不是bootstrap.bundle.js.但是会发生同样的错误.Bootstrap.bundle.js(包括正确顺序的bootstrap和popper.js)和jquery在angular-cli.json中导入.

Answer 1

运行以下命令以安装bootstrap jquery和popper.js:

  npm install bootstrap@4.0.0-beta.2 popper.js jquery --save

在angular-cli.json中添加以下行:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

在你的page.ts中添加:

declare var $;

编辑:

并非所有JavaScript库/框架都具有TypeScript声明文件.另一方面,我们可能希望在TypeScript文件中使用库/框架而不会出现编译错误.一种解决方案是使用declare关键字.declare关键字用于环境声明,您可以在其中定义可能不是源自TypeScript文件的变量.