Question

我正在尝试将typed.js集成到有角度的两个但是它不起作用。文字显得不错，但没有动画。我已经安装了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>

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

在进口

时，订单很重要

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

2 个答案: