在angular组件中导入js
在Angular组件中导入JavaScript文件通常是为了使用一些不在Angular框架内的功能或者库。以下是一些基础概念以及如何在Angular组件中导入JavaScript文件的方法：
基础概念
- 全局脚本：这些脚本通常在
index.html文件的<head>或<body>标签中通过<script>标签引入。 - 模块脚本：这些脚本可以通过Angular的依赖注入系统导入，并且可以更好地与Angular的变更检测机制集成。
导入JavaScript文件的方法
方法一：在angular.json中添加脚本引用
你可以在项目的angular.json文件中添加JavaScript文件的引用，这样它们会在构建过程中被包含进来。
"scripts": [
"src/assets/js/your-script.js"
]方法二：在index.html中直接添加<script>标签
你也可以直接在index.html文件的<head>或<body>部分添加<script>标签来引入JavaScript文件。
<script src="assets/js/your-script.js"></script>方法三：使用Angular的Renderer2服务动态添加脚本
如果你需要在组件运行时动态添加脚本，可以使用Angular的Renderer2服务。
import { Component, Renderer2, OnInit } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
constructor(private renderer: Renderer2) {}
ngOnInit() {
const script = this.renderer.createElement('script');
script.type = 'text/javascript';
script.src = 'assets/js/your-script.js';
this.renderer.appendChild(document.body, script);
}
}优势
- 灵活性：可以在不同的环境中使用不同的脚本。
- 模块化：通过Angular的依赖注入系统，可以更好地管理脚本之间的依赖关系。
- 性能优化：可以在构建过程中对脚本进行压缩和优化。
应用场景
- 第三方库：当你需要使用不在Angular生态系统中的第三方JavaScript库时。
- 遗留代码：当你需要集成旧的JavaScript代码到新的Angular项目中时。
- 特定功能：当你需要实现一些特定的功能，而这些功能最好通过原生JavaScript来实现时。
遇到的问题及解决方法
问题：脚本没有正确加载
原因：可能是脚本路径错误，或者脚本在Angular的变更检测机制之外执行。
解决方法：
- 确保脚本路径正确。
- 如果使用动态添加脚本的方法，确保脚本在Angular的变更检测周期内执行。
问题：全局变量冲突
原因：全局变量可能会与其他脚本或Angular组件中的变量冲突。
解决方法：
- 使用立即执行函数表达式(IIFE)来封装全局变量。
- 使用模块化的JavaScript代码，避免污染全局命名空间。
通过以上方法，你可以在Angular组件中有效地导入和使用JavaScript文件。记得在导入第三方库时，查看其文档以确保与Angular的兼容性。
相关·内容
在中找到的示例代码适用于alpha.28 .28版本。/2.0.0-alpha.28/angular2.dev.js"></script><script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime/system.src.js"></script>
<script src=&qu
浏览 5提问于2016-01-16得票数 2
回答已采纳
我以前一直在使用Angular 8和Material UI (在10或11发布之前)，我有一个导入所有Material UI组件的文件，但是当我尝试在Angular 11中做同样的事情时，我得到了错误。如果我单独导入，它会编译，但如果我作为一个文件导入(它导入所有组件)，我得到的错误如下-
Error: ./node_modules/@ngtools/
浏览 1提问于2020-11-25得票数 0
我试图在package.json文件中使用一个新的依赖项，并在导入之前尝试导入组件文件，我试图使用npm安装或更新依赖项，但在package.json中添加新的依赖项后无法导入。"zone.js": "^0.8.26"添加新内容后 "@angular/animations": "^6.0.3"
浏览 0提问于2018-12-01得票数 0
3回答
我目前正在开发一个Angular4应用程序，我希望导入--一些javascript库，但仅用于单个组件。目前，通过在.angular-cli.json中定义它们的路径，可以轻松地导入这些库，如下所示： "scripts": [
"../src/assets/js/jquery/cometd/jquery.cometd.js&
浏览 9提问于2018-01-09得票数 2
1回答
当我们使用' ngc‘编译skipTemplateCodegen设置为false的源代码时，ngc会生成.ngfactory.js，并且当有一个angular模块导入时，导入的模块有入口组件，也会为这些入口组件生成组件工厂，并且会生成具有相对路径的导入语句。我们所做的是，ngc编译angular代码(生成工厂)，并使用rollupjs将它们捆绑到UMD中；由于如上所述的入口组件的额外<em
浏览 11提问于2018-12-28得票数 0
我在StackBlitz中有以下项目：
Template parse errors:
More than one component matched on this element我应该注意到这个错误只发生在StackBlitz中，而不是在我的本地机器上。
浏览 3提问于2018-12-23得票数 12
回答已采纳
我使用的是带有Angular 2的.NET MVC5 (Visual Studio2015)，为了这个问题，我非常努力地整合了kendo angular 2组件，特别是kendo-angular-buttons';应为TS2300重复标识符'readonly‘TS1005 '=’
我已经尝试了许多类似问题的建议解决方案，主要是在tsconf
浏览 13提问于2017-02-11得票数 1
我在与firebase集成时遇到了一个问题，我可以成功地初始化消息传递，并可以显示弹出窗口以询问用户显示通知的权限，但之后我无法获得用户的令牌。:15724错误错误:未捕获(在promise中)：FirebaseError: Messaging:我们无法注册默认的服务工作者。(messaging/failed-serviceworker-registration).在ZoneDelegate.push../node_modules/zone.js/dist/
浏览 0提问于2019-09-18得票数 0
1回答
我的目录结构如下： |--app.component.ts
|--angular2-bootstrap-switch
<script src="node_modules/angular2/bundles/angular2-polyfills.<e
浏览 0提问于2017-07-01得票数 0
回答已采纳
2回答
我按照这个中的说明将其集成到应用程序中。
import {Component, OnInit} from '@angular/core';import{Config, Data, Layout} from &#x
浏览 67提问于2018-05-07得票数 4
回答已采纳
在我的Angular 7项目中，在src文件夹中，我有一个site.js文件，其中保存了一些javascript函数。 这个文件在angular.json中被引用(在脚本部分下)，看起来一切正常。在index.html内部，我看到来自site.js的所有函数都是可用的。 如何从angular component运行任何函数？我的site.js似乎被组件忽略了。 谢
浏览 23提问于2019-01-25得票数 0
2回答
下拉列表不是以角度打开的
、、、
我正在学习Angular，我对Bootstrap和dropdown有一个问题。Bootstrap类加载得很好，但是dropdown不起作用，这就是我为我的新项目Angular所做的： npm install bootstrap jquery popper --save 当我做npmeditors=1010 angular.json中的样式 "styles": [ "node_module
浏览 19提问于2019-05-04得票数 0
回答已采纳
我可以定义一个在客户机目录中具有TemplateUrl的指令或组件，但当我尝试从导入目录中提取它访问它时，它找不到它。一些调试表明该文件不在角度模板缓存中，这是有意义的，因为导入应该是延迟加载的。我希望将所有组件文件保存在同一目录中(在imports中)，这样我就可以从imports目录访问HTML文件？
浏览 1提问于2016-04-13得票数 1
当我不使用Angular 4时，我只会将库的script标记放入库中。即使我将script标记放在index.html文件中，它也不能识别CryptoJS。有没有办法使用这个库或Angular等效库？
浏览 0提问于2017-07-13得票数 22
回答已采纳
我有一个Angluar2应用程序，其中包括谷歌地图JS。我像这样加载Google Maps：我在地图上听到的事件是这样的：});
this.
浏览 4提问于2017-01-03得票数 1
/a.Component’导入组件；@ Component ({ selector：'my-app'，// <- index.html模板中定义的元素：'Angular2，Hello {{name}}‘/<-这是放置在组件中的模板。/a.Component’导入组件；@ Component ({ selector：'my-app&#x
浏览 2提问于2016-06-07得票数 0
回答已采纳
我不能导入原始组件使用gulpfile.js，但在哪里我可以导入其他第三方组件。我必须更改primeng.js中的路径吗？, 'node_modules/angular2/b
浏览 0提问于2016-04-19得票数 1
我试图在TS文件的组件中调用JS函数，但是我得到了一个异常。import '../../../assets/js/gantt/ganttMaster.js';
constructor() {}
浏览 3提问于2019-09-04得票数 0
在此之后，我增加了角定位包(npm install @angular/localize)。问题是，如果我试图在组件中使用$localize，在这种情况下，没有错误报告，但是当我尝试用ng extract-i18n test-app生成messages.xlf时。中是否有对$localize的支持？，也许project.json中缺少一些配置？
我在这里添加了一个指向github ()的链接，可以找到当前的nx设置。PS，我已经尝试了最新的香草角应用程序设置，在那里，$localize工作的预期，
浏览 15提问于2022-06-23得票数 -1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
