如何正确地将scrollreveal(一个JS库)导入Angular(TS)项目?

时间:2019-04-20 10:23:08

标签: javascript angular typescript typescript-typings scrollreveal.js

我已经将scrollreveal集成到了Angular项目中。

npm i --sve scrollreveal

在我的Component之一中:

import ScrollReveal from 'scrollreveal'
...
ScrollReveal().reveal('.sreveal');

它可以工作,但是正如预期的那样,由于(我相信)body已经呈现时,js库尚未完成加载,因此存在闪烁现象。

从文档中得知,将<script src="https://unpkg.com/scrollreveal"></script>添加到<head>中。我尝试从 index.html <script src="node_modules/scrollreveal/dist/scrollreveal.min.js"></script>中添加<head>。我还尝试将路径添加到 angular.json 中的scripts。它仍然不能解决闪烁问题,我对如何导入ScrollReveal表示怀疑。

我已经尝试过的东西:

  1. 在angular.json node_modules/scrollreveal/dist/scrollreveal.min.js上添加script(且没有.min)
  2. 在index.html node_modules/scrollreveal/dist/scrollreveal.min.js上添加head(不带.min)

我认为值得一提的其他无效方法:

  1. declare var ScrollReveal: any不能像TS中使用的其他JS库那样工作。

  2. 试图安装@types/scrollreveal,但在如何导入和调用显示函数方面引起更多问题。

0 个答案:

没有答案