如何在 Angular 中使用 foxTooltip? [英] How can i use foxTooltip with Angular?

问题描述

我想用 angular 导入库 foxToolTip.

I want to import the library foxToolTip with angular.

我尝试了 import * as foxToolTip from 'fox.tooltip.js';

但是 [ts] 没有找到模块 fox.tooltip.js

but the [ts] doesn't found the module fox.tooltip.js

我安装的版本:fox.tooltip.js: 1.0.13,

推荐答案

如果是 Angular 5，在 .angular-cli.json 的 scripts 数组中，添加fox.tooltip.js 的路径

In case of Angular 5, inside .angular-cli.json's scripts array, add the path to fox.tooltip.js

"scripts": [
    "../node_modules/fox.tooltip.js/dist/foxToolTip.min.js"
],

如果是 Angular 6，在 angular.json 的 scripts 数组中，添加到 fox.tooltip.js 的路径，不带 ../

In case of Angular 6, inside angular.json's scripts array, add the path to fox.tooltip.js without ../

"scripts": [
    "node_modules/fox.tooltip.js/dist/foxToolTip.min.js"
],

然后，在你的组件中，像这样声明一个名为 foxToolTip 的变量:

and then, inside your Component, just declare a variable named foxToolTip like this:

declare var foxToolTip: any;

你不需要做

import * as foxToolTip from 'fox.tooltip.js'

因为你的编译器会抛出一个错误说明:

as your the compiler will throw an error stating that:

找不到模块fox.tooltip.js".

Cannot find module 'fox.tooltip.js'.

只需将脚本添加到 .angular-cli 中的脚本数组，就会将其添加到全局范围内，您就可以从组件访问它.

Just adding the script to the scripts array in .angular-cli will add it to the global scope and you'll be able to access it from your components.

此外，当它尝试通过 id 访问 DOM 元素时，请确保在 ngAfterViewInit 生命周期钩子方法中调用任何函数.

Also, make sure that you call any function on it inside the ngAfterViewInit lifecycle hook method as it tries to access the DOM elements by id.

这篇关于如何在 Angular 中使用 foxTooltip?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！