javascript - Angular 5 + Popper.JS

Question

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

根据 Bootstrap 的文档，我通过

启动 Popper.Js

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

我在 ngOnInit 的主要组件中使用它。但是，它不起作用。出现错误“属性‘tooltip’在类型‘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 文件的变量。