如何安装或集成typed.js与angular2/4？

Question

我正在尝试将typed.js集成到角度2中，但它不起作用。文本看起来不错，但没有动画。我已经安装了jQuery和typed.js，但是动画仍然不能工作。

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>

.角-cli.json进口

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

Answer 1

用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>

Answer 2

试试这个：

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

当涉及到进口时，订单很重要。