簡體   English   中英

如何將第3方JS庫加載到我的Angular6項目中?

[英]How do I load a 3rd party JS library into my Angular6 project?

有一個很棒的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);
});

我也推薦這部影片

您不應該在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>

您可以按照此堆疊閃電戰

如果未安裝和加載jQuery,這似乎會引發錯誤。 或者,您可以嘗試TypeIt,這是我編寫的動畫打字工具。 它沒有jQuery依賴性,可以通過npm輕松安裝: npm install typeit

網站/文檔: https : //typeitjs.com/

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM