我想在我的应用程序中使用这个库:https://www.npmjs.com/package/jquery-animated-headlines
但是我不知道怎么导入。
首先,我将这些行添加到我的 angular-cli.json
"styles": [
...
"../node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css"
],
"scripts": [
...
"../node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.min.js"
]
其次,我安装 jquery npm install jquery --save
然后,我导入 jquery:import * as $ from 'jquery';
最后我复制/粘贴他们的例子:
TS:
constructor () {
$(function() {
$('.selector').animatedHeadline();
})
}
HTML:
<div class="selector">
<h1 class="ah-headline">
<span>My favorite food is</span>
<span class="ah-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</div>
我得到这个错误:Uncaught TypeError: $(...).animatedHeadline is not a function
我不知道我做错了什么...... 谢谢
最佳答案
您不需要在 angular.json 中包含您的库。将其导入到您需要的地方。
首先,安装包:
npm install jquery jquery-animated-headlines --save
然后,转到所需的组件并导入它们:
import * as $ from 'jquery' // in case u haven't imported it globally.
import * as animatedHeadline from 'jquery-animated-headlines;
@Component()
...
constructor () {
$(document).ready(() => $('.selector').animatedHeadline())
}
关于javascript - 在 Angular 中使用外部库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50989062/