2017-09-28 5 views
0

typed.jsを角2に統合しようとしていますが、機能しません。テキストは問題なく表示されますが、アニメーションはありません。私はjQueryとtyped.jsをインストールしましたが、アニメーションはまだ動作していません。typed.jsをangular2/4にインストールする方法は?

import { Component } from '@angular/core'; 
import { Typed } from 'typed.js'; 
import * as $ from 'jquery/dist/jquery.min.js'; 

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

    public ngOninit() { 
    var options = { 
    stringsElement: "#typed-strings", 
    typeSpeed: 80, 
    backDelay: 700, 
    backSpeed: 100, 
    showCursor: true, 
    autoInsertCss: false, 
    cursorChar: '|', 
    loop: true, 
    loopcount: Infinity,  
    shuffle: true, 
    } 

    var typed = new Typed("#typing", options); 
    } 
} 

div id="typed-strings" > 
<p>Typed.js is a <strong>JavaScript</strong> library.</p> 
<p>It <em>types</em> out sentences.</p> 
</div> 
<span id="typing"></span> 

.angular-cli.json インポート

"scripts": [ 
     "../node_modules/typed.js/lib/typed.min.js", 
     "../node_modules/jquery/dist/jquery.min.js" 
     ], 
+0

これだけ、このクラスを追加する必要がありますが、私たちにインポートを表示することができますか? index.htmlまたはangular-cli.json – Melchia

+0

@Melchia私はangular-cli.jsonのインポートを含めてください –

答えて

0

はこれを試してみてください:

"scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/typed.js/lib/typed.min.js" 
     ], 

順序は重要ですそれは輸入

3

に来るとき後npm install typed.js

ngOnInit() { 
    let options = { 
     strings: ["Product ", "Web ", "UX/UI"], 
     typeSpeed:200, 
     backSpeed:10, 
     showCursor: true, 
     cursorChar: "", 
     loop:true 
    } 

    let typed = new Typed(".typing-element", options); 
    } 

をインストールし、HTMLにあなたは

<h1 class="typing-element"></h1> 
関連する問題