将AOS库与Angular4应用程序集成

我正在研究Angular 4.4.6应用程序，我想在使用awesome插件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

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 ... 
 the content 
 ... 

我可能会在将来通过Angular Dependency Injection系统探索使用AOS，如滚动到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中或您要添加动画的位置

 ... 
 the content 
 ...