如何在 Angular 中引用外部 JavaScript 库
在 Angular 中，我们经常需要使用到一些外部 JavaScript 库，例如 jQuery、Bootstrap、Moment.js 等等。如何在 Angular 中引用这些外部 JavaScript 库呢？下面就为大家分享一下。
- 安装外部 JavaScript 库
首先，我们需要安装需要使用的外部 JavaScript 库。一般来说，我们可以使用 NPM 进行安装。
以 jQuery 为例，在终端中输入以下命令进行安装：
npm install jquery --save
- 配置 angular.json
在安装完成以后，需要在 angular.json 中进行配置。找到 projects -> [your project name] -> architect -> build -> options -> scripts，加入所需的 JavaScript 库路径。例如：
-- -------------------- ---- -------
-
---------- -----------------------------------------------------
---------- --
----------------- -----------
----------- -
--------- -
------- ---
------------- ------
-------------- --------------
--------- ------
------------ -
-------- -
---------- ----------------------------------------
---------- -
---
---------- -
------------------------------------
-
--
---
--
---
-
---
-
---
-
---
-- 引用外部 JavaScript 库
在 Angular 中，我们可以使用 @ViewChild 或者 ElementRef 进行外部 JavaScript 库的引用。以 jQuery 为例：
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------- --- -- ----
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------- ------ -----------
------------------- ----------- ----------- --
---------- -
------------------------------------
-
-上面的代码中，我们使用了 ViewChild 引用了一个 Input 元素，然后在 ngOnInit 中使用 jQuery 的 focus 方法进行了焦点聚焦。需要注意的是，在 TypeScript 中使用 jQuery 需要先声明 $ 变量。
- 总结
以上就是在 Angular 中引用外部 JavaScript 库的方法。需要注意的是，引用外部 JavaScript 库会增加项目的复杂度，如果可以用 Angular 自带的 Directive 或者 Pipe 实现相应的功能，尽量避免使用外部 JavaScript 库。
参考链接：
- https://stackoverflow.com/questions/46849464/how-do-i-use-jquery-with-angular-5
- https://www.techiediaries.com/angular-jquery/
- https://angular.io/guide/using-libraries
- https://www.freecodecamp.org/news/how-to-use-jquery-in-angular-angular-30f376c7e586/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d851f48841e9894bd4487