[英]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
文件中添加腳本標簽來輕松實現。
以下是您可以遵循的一些步驟,以實現所需的功能:-
index.html
。 前 <script src="./assets/js/jquery.min.js" type="text/javascript"></script> <script src="./assets/js/t.min.js" type="text/javascript"></script>
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.