将 AOS 库与 Angular4 应用程序集成

Question

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

我的代码：

app.component.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 Dependency Injection 系统使用 AOS，如 animate into view when scrolled to angular2 中所述，但到目前为止，只需在 app.component.ts 中导入 AOS 即可。

Answer 2

npm install aos --save

编辑 angular.cli.json

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

应用组件

// 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();
  }
}

在组件 html 或者你想添加动画的地方

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

Answer 3

我在 Angular 12+ 中这样做

首先，用终端安装 AOS

npm install --save aos

然后安装 AOS 类型以支持 typescript。

npm install --save @types/aos

将 AOS 样式和脚本添加到项目中： angular.json > 架构师 > 构建 > 选项 >

"styles": [
   "./node_modules/aos/dist/aos.css"
 ],

"scripts": [
   "./node_modules/aos/dist/aos.js"
 ]

为 AppComponent 或您想使用它的任何组件初始化 AOS。

import * as AOS from 'aos';

ngOnInit() {
   AOS.init();
}

在元素上使用 AOS 属性

<div data-aos="fade-up"> Your Content </div>

Answer 4

终端

# if you use npm
npm install aos -s

# if you use yarn
yarn add aos

styles.scss

@import 'aos/dist/aos.css'; //<------ Add this line to the top

app.component.ts

import { Component } from '@angular/core';
import * as AOS from 'aos'; //<------ Add this line

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor() {
        AOS.init(); //<------ Add this line
    }
}

Answer 5

对于 angular9+

做

npm install aos --save

在angular.json中添加js和css文件

            "styles": [
              "./node_modules/aos/dist/aos.css"
            ],
            "scripts": [
              "./node_modules/aos/dist/aos.js"
            ]

在应用组件（你的根组件）中，调用 AOS.init()

export class AppComponent {
  title = 'my-app';

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

如果您已经在运行，请停止，然后重新开始，因为您在 angular.json 文件中有更改

Answer 6

确保您已安装所有 3 个依赖项。

npm i classlist-polyfill
npm i lodash.debounce
npm i lodash.throttle

您可以在这里查看： https://www.npmjs.com/package/aos#init-aos