Angular是一个用于构建Web应用程序的开源平台，它采用了TypeScript作为主要编程语言。在Angular2中，我们可以很容易地将外部JavaScript脚本导入到组件中使用。本文将介绍如何在Angular2中导入外部JS文件，以便在组件中使用。
步骤
首先，我们需要将外部JS文件放置在Angular项目的assets目录下。
├── src │ ├── app │ ├── assets # 外部js文件放置在这里 │ │ └── external.js │ ├── index.html │ ├── main.ts │ ├── styles.css
接下来，在组件中引入外部JS文件。为此，我们需要在组件的
@Component装饰器中添加moduleId选项，并将其设置为module.id。该选项告诉Angular查找组件的相对路径。-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ --------- --------- -- ------------ -- ------ ----- ------------ - -- ---- -现在，在组件的构造函数中，我们可以使用
require()函数引入外部JS文件并将其分配给变量。请注意，您需要安装@types/node包以获得TypeScript中的require函数支持。-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ --------- --------- -- ------ ----- ------------ - ------------- - ----- -------- - ------------------------------------ -- -------- ------------------------ - -
现在，我们已经成功地将外部JavaScript脚本导入到Angular2组件中。您可以在组件的构造函数或其他方法中使用它们。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--------- ---------
--
------ ----- ------------ -
------------- -
----- -------- - ------------------------------------
-- --------
------------------------
-
-这是一个简单的示例，在组件构造函数中引入了外部JS文件，并使用其中的someFunction()函数。请注意，您需要根据自己的项目结构和文件路径进行修改。
总结
本文介绍了如何在Angular2中导入外部JavaScript脚本，以便在组件中使用。按照上述步骤，您就可以轻松地将外部JS文件导入到Angular2组件中，并开始使用它们。这对于集成第三方库或编写自定义功能非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28535