在angular中使用外部“live”javascript
基础概念
在Angular中使用外部“live” JavaScript通常指的是引入并执行非Angular框架编写的JavaScript代码。这些代码可能是第三方库、插件或者其他独立的功能模块。
相关优势
- 复用性：可以利用现有的JavaScript库，避免从头开始编写功能。
- 功能扩展：通过引入外部JavaScript，可以为Angular应用添加额外的功能。
- 社区支持：许多流行的JavaScript库都有活跃的社区支持，便于解决问题和学习。
类型
- 全局脚本：直接在
index.html的<head>或<body>标签中通过<script>标签引入。 - 模块化脚本：使用ES6模块或其他模块系统导入JavaScript文件。
应用场景
- 数据可视化（如D3.js）
- 地图服务（如Leaflet.js）
- 实时通信（如Socket.IO）
遇到的问题及解决方法
问题：外部JavaScript与Angular的变更检测机制冲突
原因：Angular的变更检测机制可能会与某些外部JavaScript库的事件循环或DOM操作冲突，导致应用不稳定。
解决方法：
- 使用
Renderer2：Angular提供了Renderer2服务，用于安全地操作DOM，避免直接使用原生DOM API。 - Zone.js：确保Zone.js正确处理外部JavaScript的事件循环。
- 封装外部库：将外部JavaScript库封装成Angular服务或指令，以便更好地控制其行为。
import { Injectable } from '@angular/core';
declare const myExternalLib: any;
@Injectable({
providedIn: 'root'
})
export class ExternalLibService {
init() {
myExternalLib.init();
}
}问题：外部JavaScript库的全局变量冲突
原因：多个库可能使用相同的变量名，导致命名冲突。
解决方法：
- 使用立即执行函数表达式（IIFE）：将外部JavaScript代码包裹在IIFE中，避免污染全局命名空间。
<script>
(function() {
// 外部JavaScript代码
})();
</script>- 使用模块系统：如果外部库支持ES6模块，可以通过模块系统导入，避免全局变量冲突。
import * as myExternalLib from 'my-external-lib';参考链接
通过以上方法，可以在Angular应用中有效地使用外部JavaScript，同时避免常见的问题。
相关·内容
我正在尝试在我的angular前端应用程序中集成stripe。从条带文档中：“始终直接从以下位置加Stripe.jshttps://js.stripe.com.您不能将其包含在捆绑包中，也不能自行托管它。“ 我已经在我的索引的head标签中添加了脚本，并且我看到它被正确加载。但是当尝试在ts代码中使用它时： declare var stripe: any; 和： stripe
浏览 43提问于2021-02-25得票数 0
回答已采纳
我有一个安装了Live Chat for Angular的Angular 6应用程序。 我正在尝试使用Live Chat Javascript API library来隐藏默认的浮动按钮。如果我在浏览器开发人员控制台中运行LC_API.hide_chat_window();，它可以工作。但是，如果我将该代码添加到Angular component .ts文件中，它将无法工作(因为它可以访问全局变量LC_API)。 如何访问该全局变量？
浏览 17提问于2019-01-26得票数 1
回答已采纳
3回答
">Live</a> </header>
<!</div>
2015 </div>
<script type="text/javas
浏览 4提问于2015-02-25得票数 0
回答已采纳
我正在尝试在我的Angular项目()中使用Clusterize.js库。我从来没有在项目中导入过外部js库，并且我尝试在web上找到的东西失败了(添加模块、放置在assets中、加载到index.html中...)。
浏览 0提问于2019-01-28得票数 1
我使用下面的代码将外部页面加载到lightbox中。如何从href标签将名为' page‘的变量传递给包含页面link =’country.php.php‘值的javascript (第1行)。我想要多次使用这个脚本调用，而不必为每个链接添加额外的javascript行。<script>
$("a#selector").live("click", function(){$(".overlayInne
浏览 0提问于2012-05-09得票数 0
回答已采纳
1回答
NG与传统web服务器
、、、
我是Angular2的新手。我已经说过通过互联网上的资源学习。** NG Live Development Server is listening on localhost我有以下担心，
Live只能提供<
浏览 4提问于2017-10-10得票数 8
回答已采纳
1回答
我试图在Range7项目中使用外部JavaScript文件，为此，我在angular.json文件中添加了多个JavaScript文件，如图像中所示
并在页面上加载默认的多个JavaScript文件，请建议在角7中使用外部JavaScript文件的正确方法，并建议如何使用角7中的包JavaScript
浏览 0提问于2018-12-03得票数 0
在Angular 6中，我可以通过在angular.json中添加以下内容来使用外部资源{"glob":"**/*", "input":"node_modules/xx", "/yy"},
{"glob":"**/*", &quo
浏览 2提问于2019-05-28得票数 1
3回答
外部模板:模板无法加载？
、、、
我认为用Angularjs加载外部模板非常简单，如下所示，但是它不会在浏览器上打印任何东西。我错过了什么？charset=UTF-8"> <meta charset="utf-8">
<script src="js/a
浏览 0提问于2013-12-25得票数 1
回答已采纳
2回答
这是令人沮丧的，我试图加载一个简单的脚本在我的index.html，但我得到404。/app/scripts/angular-cookies.js"></script></html>
，这是我得到的错误- 404文件在那里而且不是空的我也试过：
<script type="text/javascript" src="..
浏览 4提问于2017-07-25得票数 2
回答已采纳
Webstorm 8的Live功能在使用外部JavaScript文件(即在我的<script src="script.js"></script>中包含时)时似乎不起作用。只有在刷新页面后，外部JavaScript文件中的更改才会出现。在其他情况下，情况也很好--例如，当我开始调试时，当我对HTML或CSS文件进行更改时，Chrome中的页面就会被更新，而且当我<e
浏览 0提问于2014-06-04得票数 3
回答已采纳
我有一个外部js文件，它需要在单击某个元素时触发。这段代码在ready函数中。当我在ready函数中有一条alert语句时，一切都很正常。但是当我删除警告时，ready函数不会被调用。这段代码在ready()函数中
浏览 0提问于2012-07-23得票数 0
当我使用Angular2预发行版时，我必须使用systemjs才能使用外部javascript库，即ESRI ArcGIS JavaScript API，它是基于AMD模块的(虽然可以使用类型)。现在，我想迁移到Angular2命令行界面。但是，我不明白如何在Angular2从systemjs迁移到webpack之后导入像arcgis这样的外部库，而不需要修改webpack.config文件。<em
浏览 3提问于2017-02-01得票数 7
我正在创建一个angular >2库，它包装了另一个用普通/普通javascript编写的库。
这个外部库是一个图库.It，用于操作DOM (创建/删除/更新元素)和管理事件(单击)。在angular组件中使用这个库时，我的问题是生成的DOM不是由angular查看的，并且在生成的html中缺少属性_ngcontent-xxx……并且不应用样式。这种外部库应该如何在angular上
浏览 6提问于2017-12-04得票数 0
1回答
我想在一个Angular项目的.html组件中插入一个<script>...</script>，我想知道怎么做。 似乎我插入到这个组件中的任何Javascript都被忽略了。
浏览 46提问于2019-05-27得票数 0
回答已采纳
我正在构建一个具有Angular 2框架的web应用程序，我想使用一个外部模板。正在尝试将其转换为angular2 SPA。除了外部js之外，一切都运行得很好。JavaScripts不能正常工作。但是CSS文件正在工作。材料组件和模态其他JavaScript功能在角度组件文件内什么都不起作用。
浏览 24提问于2017-12-19得票数 1
我可以像SDK中那样传递一些参数： disableSignupAction: true, //no changes (username, password appears) //this line
浏览 0提问于2016-01-27得票数 0
1回答
我正在做一个项目，在这个项目中，我必须使用一个函数，在角JS重复中，这个函数是写在javascript上的，所以我很困惑，我想传递属于角js变量的id，称为c.Parent.id，我想在javascript函数中使用这个函数，这里是我的函数。) var start=/@/ig;
$("# -->>> HERE I WANT TO
浏览 0提问于2016-06-03得票数 0
回答已采纳
假设我在项目文件夹中编译了一个Angular项目。<br/> In this PROJECT FOLDER, I have the other JAVASCRIPT FILE, EXTERNAL to my Angular Project.<br/> 这有可能吗？就像从我的<e
浏览 0提问于2019-05-15得票数 1
在jquery移动页面上初始化对象的正确方法是什么？说使用"pageInit()“，但没有给出函数示例，但是给出了绑定到"pageinit”方法的示例(注意大小写不同)。然而，在这个简单的测试页面中，我根本看不到事件触发： <body>
<script type="text/javascript" charset="utf-8" src="http://ajax.goog
浏览 0提问于2011-09-25得票数 41
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
