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

Question

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

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

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

您可以在此处查看t.js的网站。 然后，您将看到他们的文档，并了解我使用的.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);
});

我也推荐这部影片 。

Answer 1

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

以下是您可以遵循的一些步骤，以实现所需的功能：-

1. 添加资产文件夹，然后放入jquery.js和t.js文件。
2. 将这些脚本链接到index.html 。 前

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

3. 在您的组件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>

您可以按照此堆叠闪电战

Answer 2

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

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

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