Wie installiere oder integriere typed.js mit angular2/4?

Question

Ich versuche typed.js in eckige zwei zu integrieren, aber es funktioniert nicht. Der Text erscheint in Ordnung, aber es gibt keine Animation. Ich habe jQuery und typed.js installiert, aber die Animation funktioniert immer noch nicht.

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 Import

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

Answer 1

Try this:

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

Reihenfolge ist wichtig wenn es um die Einfuhr kommt

Answer 2

Nachdem mit 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); 
    } 

installieren und in HTML müssen Sie diese nur

dieser Klasse hinzufügen

<h1 class="typing-element"></h1>