jquery - 将 AOS 库与 Angular4 应用程序集成

Question

我正在开发 Angular 4.4.6 应用程序，我想使用很棒的插件实现一些滚动动画 AOS

我的代码:

应用程序组件.ts

import * as AOS from 'aos';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
 ngOnInit(){
  AOS.init();
 }
}

app.component.html

<div class="box" data-aos="slide-left">
      <img src="assets/imgs/seo.png" alt="">
</div>

angulr.cli.json

"styles": [
    "../node_modules/aos/dist/aos.css",
    "../node_modules/animate.css/animate.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/aos/dist/aos.js"
  ],

我试过这里的答案但没有希望 https://stackoverflow.com/a/44808496/4183947

注意:我的控制台没有错误。

Answer 1

我正试图让同样的事情适用于我正在迁移到 Angular 4.2.4 的网站。由于您在 angular.cli.json 中包含了 AOS 样式表的路径，您可能已经通过以下方式安装了 AOS:

npm install aos --save

我使用以下命令运行它:

// angular.cli.json
...
"styles": [
  "../node_modules/aos/dist/aos.css",
  "styles.scss"
],
"scripts": [],
...

和:

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    AOS.init();
  }
}

在我的例子中，我在 HomeComponent 中有标记:

// home.component.html
...
<div data-aos="fade-up" data-aos-once="true">
  the content
</div>
...

我将来可能会探索通过 Angular 依赖注入(inject)系统使用 AOS，如 animate into view when scrolled to angular2 中所述但到目前为止，只需在 app.component.ts 中导入 AOS 即可。