Question

我找到了一个库，可以在滚动到（aos）时将元素设置为视图，但它似乎没有任何angular2绑定可供使用。有没有人知道如何在angular2中完成这样的事情，或者至少配置aos在angular2内工作？

感谢您的帮助

Answer 1

对于那些从2020年开始遇到此问题的人，在最新版本的Angular中有一种更简单的方法来解决此问题：

导入AOS库：npm i -s aos
将键入内容导入TypeScript：npm i -D @types/aos
以全局样式（可能是src / styles.scss）导入CSS：@import "~aos/dist/aos.css";
在项目的根组件（可能是app-component.ts）上启动AOS

import * as AOS from 'aos';
...
export class AppComponent implements OnInit {
    ngOnInit(): void {
        AOS.init();
    }
}

开心：

<img data-aos="animation_name" src="..."/>

例如：

<img data-aos="fade" src="..."/>

动画名称列表：https://github.com/michalsnik/aos/tree/v2#-animations

高级设置：https://github.com/michalsnik/aos/tree/v2#-advanced-settings

Answer 2

Angular（意为版本2+）使得将任何第三方JS库包含到您的应用中非常容易。通过以下步骤，我能够让aos在Angular 4中工作：

免责声明：您可以使用@angular/animations完成相同或更好的操作，但如果您想在Angular中使用aos（或其他第三方库），则会告诉您如何使用做到这一点。要详细了解如何使用@angular/animations，请访问https://angular.io/guide/animations

安装Angular CLI：npm i -g @angular/cli
创建一个新的Angular应用：ng new angular-aos-app
安装aos：npm i --save aos

在aos中加入.angular-cli.json CSS：

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

通过Angular的依赖注入系统连接aos：

// aos.ts  
import * as animateOnScroll from 'aos';  
import { InjectionToken } from '@angular/core';  

export const aos = animateOnScroll;  
// This makes it possible to refer to AOS in Angular, see below
export const AosToken = new InjectionToken('AOS');

// app.module.ts  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';        
import { AosToken, aos } from './aos';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule ],
  providers: [
    //register AOS with DI
    { provide: AosToken, useValue: aos }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

将aos注入您的组件：

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

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

  //use the injection token to inject into your constructor
  constructor(@Inject(AosToken) aos) {  
    aos.init();  //you can now use it, although you may want to do this onInit instead
  }  
}

在HTML中添加一些aos动画：<ul data-aos="slide-left">

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2>Here are some links to help you start: </h2>
<ul data-aos="slide-left"><!-- animate this list when you scroll down -->
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
</ul>

滚动到angular2

2 个答案: