Angular 5 + Popper.JS

Question

Angular 5 + Popper.JS

javascriptangulartwitter-bootstraptypescriptangular5

6

我正在尝试开展一个需要 Popper.Js 功能的培训项目。但是，它似乎不允许我开始使用 Popper.Js。根据 Bootstrap 的文档，我通过执行：

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

我在主组件中使用了它，在ngOnInit中。然而，它不起作用。出现错误"属性“tooltip”不存在于类型“JQuery”上"。我已经导入了jquery和bootstrap捆绑文件，并且安装了所有库的类型。我还尝试了纯粹的"popper.js"，而不是bootstrap.bundle.js。但是同样的错误发生了。在angular-cli.json中导入了bootstrap.bundle.js（包括正确顺序的bootstrap和popper.js）和jquery。

- Sergey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Melchia · Accepted Answer

运行以下命令安装Bootstrap jQuery和Popper.js：

运行以下命令以安装引导程序jQuery＆amp; 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文件。