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

运行下面命令安装bootstrapjquery&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 libraries/frameworks 都有 TypeScript 声明文件。另一方面，我们可能希望在 TypeScript 文件中使用 libraries/frameworks 而不会出现编译错误。一种解决方案是使用 declare 关键字。 declare 关键字用于环境声明，您希望在其中定义可能不是源自 TypeScript 文件的变量。

Angular 5 + Popper.JS

Angular 5 + Popper.JS

javascript

twitter-bootstrap

typescript

angular

angular5