javascript - 在 Angular 中使用外部库

Question

我想在我的应用程序中使用这个库: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

我不知道我做错了什么......谢谢

Answer 1

您不需要在 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())
}