angular7中wow.js的使用

ngx-wow地址

• https://tinesoft.github.io/ngx-wow/doc/index.html
• https://www.npmjs.com/package/ngx-wow

首先安装依赖项， wow.js

npm install --save wowjs

在angular.json中引入animate.css和wow.js

"styles": [
   "src/styles.scss",
   "src/assets/iconfont/iconfont.css",
   "node_modules/swiper/dist/css/swiper.min.css",
   "node_modules/animate.css/animate.css"
 ],
 "scripts": [
     "node_modules/swiper/dist/js/swiper.min.js",
     "node_modules/wowjs/dist/wow.js"
 ],

安装ngx-wow

npm install --save ngx-wow

在需要的模块中导入NgwWowModule 模块

// company-profile.module.ts
import { NgwWowModule } from 'ngx-wow';
 imports: [
        CommonModule,
        CompanyProfileRoutingModule,
        SharedModule,
        NgwWowModule
    ]

依赖注入并初始化

导入模块后，您可以使用NgwWowService组件中的（即AppComponent）通过调用触发显示动画，init()或者在显示元素时通过WOW通知。

import { NgwWowService } from 'ngx-wow';
ngOnInit() {
    this.wow.init();
}

初始化和引入模块，可以直接在app模块中进行导入和初始化