将AOS库与Angular4应用程序集成 [英] Integrate AOS library with Angular4 application

问题描述

我正在使用Angular 4.4.6应用程序，我想使用很棒的插件 AOS

I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin AOS

我的代码:

app.component.ts

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

app.component.html

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

angulr.cli.json

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

I've tried the answer here with no hope https://stackoverflow.com/a/44808496/4183947

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

Note: I've no errors in my console.

推荐答案

我正在尝试为要迁移到Angular 4.2.4的网站工作.由于您在angular.cli.json中包含了AOS样式表的路径，因此您可能已经通过以下方式安装了AOS:

I'm trying to get the same thing working for a site I'm migrating to Angular 4.2.4. Since you included the path to the AOS stylesheet in your angular.cli.json you probably already installed AOS via:

npm install aos --save

我通过以下方式运行它:

I got it running with the following:

// 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中有标记:

and in my case I have markup in a HomeComponent:

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

如

I might explore using AOS via the Angular Dependency Injection system in the future, as described in animate into view when scrolled to angular2 but simply importing AOS in app.component.ts is working so far.

这篇关于将AOS库与Angular4应用程序集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！