はAngular4アプリケーション

Question

とAOSライブラリを統合し、私は角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> 

私は私のコンソールにエラーをしましたん：

"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" 
    ], 

ngulr.cli.jsonノー希望 https://stackoverflow.com/a/44808496/4183947

注意して、ここで答えを試みました。

Answer 1

私はAngular 4.2.4に移行しているサイトで同じことをしようとしています。私はそれが次のように実行してしまった

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

あなたがAOSのスタイルシートへのパスが含まれているので、あなたのangular.cli.jsonあなたはおそらくすでに経由でAOSをインストール私の場合、HomeComponentにマークアップがあります。

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

animate into view when scrolled to angular2で説明されているように、角度依存性注入システムを使用してAOSを使用してみることもできますが、これまでのところAOSをインポートするのはapp.component.tsです。