首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么将eventlistner添加到我的动态创建的图像在更新到Angular 8后在页面加载时都会触发

在更新到Angular 8后,将eventlistener添加到动态创建的图像上,在页面加载时会触发的原因可能是由于Angular 8中的变更导致的。

在Angular 8中,对于动态创建的元素,特别是在使用*ngFor指令或其他动态数据绑定方式时,Angular引入了更加严格的变更检测机制。这意味着当数据发生变化时,Angular会重新渲染相关的视图,并重新创建动态元素。

因此,当页面加载时,Angular会重新创建动态图像元素,并且由于之前添加的eventlistener没有被正确地清除或重新绑定,导致事件监听器被重复添加,从而在页面加载时触发多次。

为了解决这个问题,可以尝试以下几种方法:

  1. 使用ngAfterViewInit生命周期钩子函数:将添加eventlistener的逻辑放在ngAfterViewInit生命周期钩子函数中。这样可以确保在视图初始化完成后再添加事件监听器,避免在页面加载时重复触发。
  2. 使用@HostListener装饰器:在组件类中使用@HostListener装饰器来添加事件监听器。这样可以确保事件监听器只会在组件实例化后才会被添加,避免在页面加载时重复触发。
  3. 使用事件委托:将事件监听器添加到父元素上,通过事件委托的方式来处理动态创建的图像元素的事件。这样可以避免为每个动态元素都添加事件监听器,减少重复触发的可能性。

需要注意的是,以上方法只是一些常见的解决方案,具体的实现方式可能会根据项目的具体情况而有所不同。另外,关于Angular 8的更多信息和更新内容,可以参考腾讯云的Angular产品介绍链接地址:https://cloud.tencent.com/product/angular

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular v18 现已推出!

angular.json展望未来,无区域为开发人员打开了许多大门:改进微前端可组合性以及与其他框架互操作性更快初始渲染和运行时更小捆绑包大小和更快页面加载速度更具可读性堆栈跟踪调试简单在组件中使用无区域最佳方式是使用信号...接下来几个月里,我们继续根据你反馈对实现进行迭代,直到我们将其升级为稳定版。...从 v18 开始,事件调度使用混合渲染为事件回放提供支持。大多数开发人员不会直接与事件调度进行交互,因此让我们研究一下为什么事件回放很有用。您可以在下面找到一个简单电子商务网站模拟。...我们引入了人为加载延迟来模拟非常慢网络连接。想象一下,当页面正在加载并且尚未补水,用户想要将多个耳机添加到他们购物车中。如果页面尚未冻结,因此不是交互式,则所有用户事件都将丢失。...客户端上,Angular 下载关联 JavaScript,并仅在满足模板中指定触发条件对延迟块进行水合。

11710

Angular v8 发布!来看看有什么新功能

本文中,我介绍 Angular 8Angular CLI 8 最重要新功能。我文中例子可以 GitHub 上找到。...中存储以下配置条目: 1"angularCompilerOptions": { 2 "enableIvy": true 3} 新到 Angular 8 之后,也可以手动添加此条目...为了类似这样计算甩给后台,我们必须首先用 Angular CLI 创建 一个Web worker: 1ng generate worker n-queens 此语句不仅为 worker 创建文件,还为构建过程和现有文件中条目创建配置文件...为了使不同浏览器可以决定要加载哪个版本 bundle 包,他们 index.html 添加中接受 script 引用:指向 ECMAScript 5 包那些引用会添加 nomodule。...原文:https://jaxenter.com/whats-new-angular-8-159020.html 下面夹杂一些私货:也许你和高薪之间只差这一张 2019年京程一灯课程体系上新,这是我们第一次全部课程列表对外开放

3K30

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

每次我们改变我们代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们浏览器页面打开重新加载页面。...但AppComponent将在应用程序中其他任何内容之前加载,因此我们必须认为它是整洁而小巧。我们最好再创建一个组件来照顾存储卡片列表并将其显示我们页面上。...使用模板驱动表单与以前使用简单HTML表单完全相同。如果我们需要复杂东西,那么Angular中有一种不同形式:反应式。我们介绍转换表单他们反应。...这就是你如何效果集成到从服务器加载数据过程。但是我们仍然需要将其发回到我们的卡片创建中。让我们来做这件事吧。...如果我们About应用程序中需要一个页面会怎么样 我们如何将它添加到我们当前代码库?显然,该页面应该是一个组件(与Angular其他内容一样)。我们来生成这个组件。

42.5K10

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

两者区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到);而 ng-bind 则是 Angular 渲染完毕数据显示...被选中才会加载,避免网络拥挤 当然也有缺点: DOM 重建本身费时间 如果 tab 下有 controller,那么每次该 tab 被选中 controller 都会被执行 如果在 controller...里面调接口获取数据,那么每次该 tab 被选中都会重新加载 各位读者自己取舍。...大家都知道,循环中批量添加DOM元素时候,会推荐使用DocumentFragment,为什么呢,因为如果每次都对DOM产生变更,它都要修改DOM树结构,性能影响大,如果我们能先在文档碎片中把DOM...第二点区别是,ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

7.8K40

Angular 从入坑到挖坑 - 路由守卫连连看

:是否允许通过延迟加载方式加载某个模块 添加了路由守卫之后,通过路由守卫返回值,从而达到我们控制路由目的 true:导航将会继续 false:导航将会中断,用户停留在当前页面或者是跳转到指定页面...; } } 这里模拟判断用户有没有修改原始数据,当用户修改了数据并移动到别的页面触发路由守卫,提示用户是否保存再离开当前页面 ?...这里问题与配置通配路由需要放到最后原因相似,因为脚手架在帮我们创建模块导入到 app.module.ts 中,是添加到整个数组最后,同时因为我们已经 crisis 模块路由配置移动到专门...当问题解决,就可以针对 crisis 模块设置惰性加载 配置惰性路由,我们需要以一种类似于子路由方式进行配置,通过路由 loadChildren 属性来加载对应模块,而不是具体组件,修改...框架会通过 loadChildren 字符串来动态加载 CrisisModule,然后把 CrisisModule 添加到当前路由配置中,而惰性加载和重新配置工作只会发生一次,也就是该路由首次被请求执行

3.7K30

2022 最新 Vue 3.0 面试题

、compile 解析模板指令,模板中变量替换成数据,然后初始化渲染页面视图,并将 每个指令对应节点绑定更新函数,添加监听数据订阅者,一旦数据有变动,收到通知, 新视图 3、Watcher...(必会) 当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩 子函数 8、请说下封装 Vue 组件过程?...,但是面对需求频繁变化,去要切换组件动态组件切 换过程中,组件实例都是重新创建,而我们需要保留组件状态,为了解决这个问题, 需要使用到 vue 中内置组件 包裹动态组件,会缓存不活动组件实例...中,并且可以每个组件中使用 2、现在我们知道了可以通过动态路由传参,路由中设置了,多段路径参数,对应 值分别都会设置到 router.query 和$router.params 中 46、JQuery...懒加载简单来说就是按需加载 1、像 vue 这种单页面应用,如果没有应用懒加载,运用 webpack 打包文件 将会异常大,造成进入首页, 需要加载内容过多,时间过长,会出现长时间

12510

Vue面试题-02

监听(watch)是一个过程,监听值变化时,可以触发一个回调,并做一些事情。回调函数有两个参数,一个 val (修改 data数据),一个 oldVal(原来 data 数据)。...(num、price)情况;侦听器应用场景是计算内容依赖一个属性(仅num发生变化、仅price发生变化)情况 计算属性缓存结果每次都会重新创建变量,而侦听器是直接计算,不会创建变量保存结果...它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换,打断用户体验。...单页应用中,所有必要代码(HTML、JavaScript和CSS)都通过单个页面加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当资源,并添加页面。...优点 具有桌面应用即时性、网站可移植性和可访问性;内容改变不需要重新加载整个页面;良好前后端分离,分工明确 首屏加载较快,SEO优化较好。

2.1K30

angular面试题及答案_angular面试

像p标签或者h1标签,标记之间可以添加内容,eg: this is a paragraph.那我们如果想在angular标签之间添加内容呢,例如在</app-test...– 页面渲染 AOT优势   1、渲染得更快   2、需要异步请求更少   3、需要下载Angular框架体积更小   4、提早检测模板错误   5、安全 JIT...当没有配置base标签加载应用会失败。 23....Angular加载 默认情况下,初始化时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载加载 : 通俗 讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务器通讯非常便利。

10.9K120

Angular 从入坑到挖坑 - Router 路由使用入门指北

Angular 项目中,系统路由需要我们一个 url 地址映射到一个展示组件,因此需要手动去设置 url 与组件之间映射关系 因为我们使用 Angular CLI 创建项目,选择了添加路由模组...当定义好路由信息,我们需要在页面上使用 标签来告诉 Angular 何处渲染出页面。...从截图中可以看到,当我们打开系统,会自动跳转到我们指定 home 路径,点击菜单按钮,则会加载对应组件页面 4.1.4、激活路由 很多情况下,对于被选中路由,我们可能会添加一个特定样式来进行提示用户...对于参数对象中属性(key)对应属性值(value),我们可以绑定一个组件中属性进行动态赋值,也可以通过添加单引号参数值作为一个固定数值,例如在下面代码中两个查询参数就是固定值 <a class...,跳转页面我们肯定需要获取到传递参数值。

4.2K50

选择大于努力,你必须了解web1.0到web2.0三段历史

于是WEB1.0技术出现了,程序与页面混合在一起,用特殊标记分开,并且把页面的名字由HTML变成了ASP,PHP,JSP等等,这样web服务器就会识别为需动态加载页面,从而调用ASP等对应CGI...动态页面使得前端本身丰富程度大大提升。这一下子迎来了整个互联网开发繁荣时期,但这种模式下任何数据更新,都需要刷新整个页面,并且带宽不足年代,这样做会耗费不少加载网页时间。...Gmail诞生,大家意识到前端也可以做出复杂应用。...各大框架在这个步骤上,各显神通: Angular1就是最老套脏检查。所谓脏检查,指的是Angular1在对数据变化检查上,遵循每次用户交互都检查一次数据是否变化,有变化就去更新DOM这一方法。...这样做也伤了一大批Angular1用户心,微软搞WP8,抛弃了WP7开发者,至此WP平台玩完。这大概也是也是Angular这个优秀框架现在在国内没有大面积推广原因。

1.2K10

Angular学习(01)-架构概览

bootstrap:只有根模块才需要配置,用来设置应用主视图,Angular 应用启动,这里就是入口,类似于 Android 中入口 Activity 还有其他一些可选配置,比如应用主题,或者动态组件声明等等...以往,如果需要动态更新 DOM 上信息,需要先获取到相对应元素实例对象,然后调用相应 DOM API 来操纵 DOM; 而使用 Angular 的话,可以直接在模板相应元素中,某个属性与...Angular 会自动创建相关服务实例,然后组件适当时候,这个实例注入给组件去使用。...指令原理也很简单,模板中某个元素标签上,添加上某个指令,解析到这个指令,会进入这个指令相关工作,而指令内部,会获取到一个当前指令挂载元素标签对象,既然都拿到这个对象了,那么,指令内部想对这个元素做什么...这是用 WebStrom 创建一个 Angular 项目,自动生成简单架构。

3.6K50

58道Vue常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度

页面(MPA),就是指一个应用中有多个页面页面跳转是整页刷新 单页面的优点:用户体验好,快,内容改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容专场动画...而压缩静态资源文件最终也都会放置 static 文件中跟着 index.html 一同上传至服务器。...答:每个 Vue 实例在被创建都要经过一系列初始化过程——例如,需要设置数据监听、编译模板、实例挂载到 DOM 并在数据变化时更新 DOM 等。...(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完弹出广告窗, 那我们最早可在mounted 中进行。 43.第一次页面加载触发哪几个钩子?...比如如果你要操作 DOM , 那肯定 mounted 时候才能操作. 47.请详细说下你对vue生命周期理解? 答:总共分为8个阶段创建前/,载入前/,更新前/,销毁前/

33.4K86

2020最新前端面试题_2020年前端面试题

初次加载耗时多;页面复杂度提高很多。 21、Vue 项目中为什么要在列表组件中写 key,其作用是什么?...当你修改了data值然后马上获取这个dom元素值, 是不能获取到更新值,你需要使用$nextTick这个回调, 让修改data值渲染更新到dom元素之后获取,才能成功。...同时在这个过程中也会运行一些叫做 生命周期钩子 函数, 这给了用户不同阶段添加自己代码机会。 31、第一次页面加载触发哪几个钩子?...34、vue生命周期理解 总共分为8个阶段创建前/,载入前/,更新前/,销毁前/。...1、实例创建之后添加属性到实例上(给响应式对象新增属性) 2、直接更改数组下标来修改数组值。

6.6K10

【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

Angular模板更新到Angular 7 Angular模板更新到Angular 7。 .NET Core 3.0 发布稳定版本之前,我们预计会更新到Angular 8。...本节中,我们展示如何创建一个新Angular或React模板,该模板允许我们对用户进行身份验证并访问受保护API资源。...创建Angular应用程序 要创建一一个新支持身份验证Angular应用程序,我们需要调用以下命令: 1: dotnet new angular -au Individual 这个命令创建一个新...注册为新用户,我们将被重定向回应用程序,在那里我们可以看到我们成功地通过了身份验证。 ? 调用经过身份验证API 如果我们点击获取数据,我们可以看到天气预报数据列表 ?...应用程序访问页面,要求对用户进行身份验证,我们[AuthorizeGuard]应用到正在配置路由上。

22.6K10

2020vue面试题及答案_人际关系面试题及答案

Vue生命周期中有多个事件钩子,让我们控制整个Vue实例过程容易形成好逻辑。 12、第一次页面加载触发哪几个钩子?...14、简单描述每个周期具体适合哪些场景 beforecreate : 可以在这加个loading事件,加载实例触发 created : 初始化完成事件写在这⾥,如在这结束loading事件,异步请求也适宜在这...使用 URL hash 来模拟一个完整 URL,于是当 URL 改变页面不会重新加载。...基本概念 Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致页面应用。...、单页面应用不利用seo优化、首次加载耗时多 26、说出至少 4 种 vue 指令和它用法?

8.7K20

【必看】58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度

页面(MPA),就是指一个应用中有多个页面页面跳转是整页刷新 单页面的优点:用户体验好,快,内容改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容专场动画...而压缩静态资源文件最终也都会放置 static 文件中跟着 index.html 一同上传至服务器。...答:每个 Vue 实例在被创建都要经过一系列初始化过程——例如,需要设置数据监听、编译模板、实例挂载到 DOM 并在数据变化时更新 DOM 等。...(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完弹出广告窗, 那我们最早可在mounted 中进行。 43.第一次页面加载触发哪几个钩子?...比如如果你要操作 DOM , 那肯定 mounted 时候才能操作. 47.请详细说下你对vue生命周期理解? 答:总共分为8个阶段创建前/,载入前/,更新前/,销毁前/

1.1K00

2023 年前端大事记

以前,我们可能会使用 setTimeout 来预估滚动可能在一定时间完成,但这可能导致回调函数滚动过程中或滚动结束一段时间触发,用户体验不佳。...Chrome 使用数据显示,用户页面上花费时间有 90% 是在网页加载完成花费,因此,仔细测量整个页面生命周期响应能力是非常重要,这就是 INP 指标评估内容。...Chrome 提出新一代预渲染技术通过以下三种方式提供:当你 Chrome 地址栏中输入 URL 或一个关键词,如果 Chrome 推测你会访问某个页面,它可能会自动为你预渲染这个页面。...另外,通过在网页中添加特定 JSON ,可以触发浏览器对指定页面的数据预取或预渲染。 Chrome 团队正在尝试这种预渲染技术广泛应用于 Web 开发中。...推荐两个替代方案,第一个是 visibilitychange 事件,当用户切换选项卡、最小化浏览器窗口或打开新页面都会触发这个事件。

32510

2020年,vue面试遇到问题(中)

答:静态资源存放位置放在src目录下 16、怎么解决vue动态设置imgsrc不生效问题?...但是我们可以把页面需要请求放到Vue-Router守卫中执行,意思是路由beforeEnter之前就可以请求待加载页面中所有组件需要数据,此时待加载页面的Vue组件还没开始渲染,而Vue组件开始渲染时候我们就可以用...意:每个页面(Page)中都会有很多个Vue组件,可以Vue组件中添加自定义属性fetchData,fetchData里面可以执行异步请求(图中执行VuexAction),但是我们怎么获取到所有组件...这样我们就可以解析守卫中获取到所有待加载组件fetchData方法并执行,这样无疑会在组件开始渲染之后获取到所有数据,提高页面加载速度。...、pop等方法 从源码中可以看出,ob.dep.notify()当前数组变更通知给其订阅者,这样当使用重写后方法改变数组,数组订阅者会将这边变化更新到页面

1.9K30
领券