Question

有一个很棒的JS库，名为“ t.js”。它用于制作酷炫的打字机效果。无法通过npm下载该库，您必须下载其t.min.js文件。

通常，在将库添加到Angular6项目时，必须通过npm安装它，但是正如我说的那样，您不能这样做。因此，我尝试在HTML文件中粘贴一个script标记以引用它。但是，现在它一直给我一个错误：

$(...).t is not a function

您可以访问t.js的网站here。然后，您将看到他们的文档，并了解我所使用的.t的用法。

那么当无法通过npm安装第三方JS库到我的Angular6项目时，有人知道吗？

经过Google搜索后，有人说错误是该库是.js而不是.ts，如果有帮助的话。

这也是我使用的一些代码：

<script src="assets/t.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
  setTimeout(() => {
    $('#main').t({
      beep: true,
      caret: '<span style="color: hotpink;">·</span>',
      typing: (elm, chr) => {
        if (chr.match(/\-trigger/)) {
          $('#pow-txt').show().delay(500).fadeOut(0);
        }
      }
    });
  }, 4200);
});

我也推荐这个video。

Answer 1

您不应该在angular中使用jquery，它会在以后引起很多问题。但是，如果您想做一些有趣的事情，可以通过在index.html文件中添加脚本标签来轻松实现。

以下是您可以按照以下步骤实现所需的步骤：-

添加资产文件夹，然后放置jquery.js和t.js文件。

在index.html中链接这些脚本。前

    <script src="./assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="./assets/js/t.min.js" type="text/javascript"></script>

在组件ts文件中，必须声明jQuery变量才能将其与全局jQuery变量链接。使用此变量可以执行所有jquery操作。

在ts文件中

import { Component } from '@angular/core';
declare var jQuery;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  runDemo1() {
    jQuery('#demo_1').t({
      beep: true,
      caret: '<span style="color:hotpink;">•</span>',
      typing: function (elm, chr) {
        if (chr.match(/\-trigger/))
          jQuery('#pow-txt').show().delay(500).fadeOut(0);
      }
    });
  }
}

在组件html文件中

<button (click)="runDemo1()">Run demo</button>

<pre id="demo_1">
######<ins><span id="pow-txt" style="display:none;color:tomato;">---[POW!]</span></ins>
##<del>\<ins>1.5</ins></del><del id="pow-trigger">|</del>\
</pre>

您可以遵循此stackblitz

Answer 2

如果未安装和加载jQuery，这似乎会引发错误。或者，您可以尝试TypeIt，这是我编写的动画打字工具。它没有jQuery依赖性，可以很容易地通过npm：npm install typeit安装。

网站/文档： https://typeitjs.com/

Github： https://github.com/alexmacarthur/typeit

如何将第3方JS库加载到我的Angular6项目中？

2 个答案: