为什么将eventlistner添加到我的动态创建的图像在更新到Angular 8后在页面加载时都会触发
在更新到Angular 8后，将eventlistener添加到动态创建的图像上，在页面加载时会触发的原因可能是由于Angular 8中的变更导致的。
在Angular 8中，对于动态创建的元素，特别是在使用*ngFor指令或其他动态数据绑定方式时，Angular引入了更加严格的变更检测机制。这意味着当数据发生变化时，Angular会重新渲染相关的视图，并重新创建动态元素。
因此，当页面加载时，Angular会重新创建动态图像元素，并且由于之前添加的eventlistener没有被正确地清除或重新绑定，导致事件监听器被重复添加，从而在页面加载时触发多次。
为了解决这个问题，可以尝试以下几种方法：
- 使用ngAfterViewInit生命周期钩子函数：将添加eventlistener的逻辑放在ngAfterViewInit生命周期钩子函数中。这样可以确保在视图初始化完成后再添加事件监听器，避免在页面加载时重复触发。
- 使用@HostListener装饰器：在组件类中使用@HostListener装饰器来添加事件监听器。这样可以确保事件监听器只会在组件实例化后才会被添加，避免在页面加载时重复触发。
- 使用事件委托：将事件监听器添加到父元素上，通过事件委托的方式来处理动态创建的图像元素的事件。这样可以避免为每个动态元素都添加事件监听器，减少重复触发的可能性。
需要注意的是，以上方法只是一些常见的解决方案，具体的实现方式可能会根据项目的具体情况而有所不同。另外，关于Angular 8的更多信息和更新内容，可以参考腾讯云的Angular产品介绍链接地址：https://cloud.tencent.com/product/angular
相关·内容
我正在创建一个函数来计算我的Ionic 3应用程序的每个页面的页面加载时间(我使用延迟加载)。然而，我目前在以下问题上陷入困境：
页面什么时候开始创建HTML？
页面什么时候完成创建HTML？
页面什么时候完成下载页面上的所有资源(图像等…)？？
有人能给我建议吗？
浏览 1提问于2019-05-08得票数 2
我一直在自我学习角一点一点，并已经谈到了生命周期挂钩的主题。
生命周期挂钩基本上是在创建和销毁组件并实现来自@angular/core的特定接口时自然发生的自触发事件。
我的问题是，什么时候我才能说“这需要一个钩子”？理想情况是：
如果有要重复的代码，则使用函数。
如果你决定让你使用if/else
使用钩子有这样的区别吗？来自官方文件：
角形提供了生命周期挂钩，提供了对这些关键生命时刻的可见性，以及在它们发生时采取行动的能力。指令具有相同的生命周期挂钩。
我不明白的是，这将是如何实际，或为什么你需要这样做。
浏览 0提问于2018-09-14得票数 1
回答已采纳
6回答
如何将呈现元素中的事件侦听器绑定到角2中？
我正在使用Dragula拖放库。它创建动态HTML，但我的事件并不绑定到动态HTML元素。
浏览 12提问于2017-01-12得票数 63
回答已采纳
我正在为我的angular应用程序创建一个加载器。
最常见的方法是在订阅http请求时传递布尔参数，但我的服务的响应是一系列图像URL，因为页面中充满了图像。
因此，当检索到URL时，加载程序停止，但由于连接速度较慢，用户感到恼火，因为图像尚未完成加载。
我尝试使用Javascript的load事件来监听我的资源何时完成加载，这样我就可以在那个时候停止加载器，但是似乎我不能通过侦听器函数来操作加载器的值。
这是我尝试过的：
//the TS component
isLoading: boolean;
ngOnInit() {
this.isLoading = true;
this.chec
浏览 0提问于2018-05-15得票数 11
回答已采纳
我试图通过修改标准的stackblitz.com " Hello“项目来学习如何使用ng-模板，以便使用ng-模板呈现Hello。不幸的是，它得到了一个讨厌的ExpressionChangedAfterItHasBeenCherredError。
先前的值：“名称:未定义的”。当前值：“名称:角”。该视图似乎是在其父视图和其子视图被脏检查后创建的。它是否在更改检测钩子中创建？
有人能解释一下吗?可以在没有错误的情况下完成？
@Component({
selector: 'my-app',
templateUrl: './app.component.htm
浏览 0提问于2018-12-24得票数 0
回答已采纳
1回答
我正在寻求做一些类似于的事情。它使用助手指令为生成的组件标记模板中的有效插入点。但是，对于我的应用程序，应该包含新组件(<ng-template adHost>)的容器在加载页面和用户单击了一些东西之后才存在。
据我所知，这完全违反了指令。角不知道在哪里插入生成的组件，也根本不插入它们。
我该如何解决这个问题？
是他们的例子中的一个堆栈闪现。
是我试图做的一次稍作修改的堆栈闪电战。
浏览 5提问于2022-09-10得票数 0
我必须将从myForm.valid获得的boolean值传递给Angular 2组件。它是一个模板驱动的表单。通过双向绑定的方式在组件中获取它是我想要实现的目标。下面的代码不起作用。如何获得myForm.valid的值到我的Angular 2组件？
<form #myForm=“ngForm">
.
.
<input type="hidden" id="isValid" name="isValid" [(ngModel)]="isValid" value="myForm.valid"/&g
浏览 0提问于2017-09-28得票数 1
是否存在所谓的"ngAfterAllChildrenInit“生命周期钩子，因为ngAfterViewInit在子对象的ngOninit之前被调用，
我试图避免使用setTimeOut或从所有子进程中发出事件并收集它们，然后做我想做的事情(这依赖于子进程的初始化)
这看起来很常见，为什么它不是angular的一部分呢？
浏览 30提问于2018-03-14得票数 1
1回答
我使用以下命令来设置容器的大小：
ngOnInit() {
this.innerWidth = document.getElementById("Cont").clientWidth;
this.containerWidth = this.innerWidth;
console.log("init");
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = document.getElementById("Co
浏览 2提问于2019-11-24得票数 0
我正在创建一个Angular指令，请帮助我如何在Angular(7)中检测'click‘元素和'click’外部元素的每个事件。 @Hostlistener ('click', ['$event']) onClick(){} 用于单击元素(此处为按钮) @Hostlistener ('document:click', ['$event'] outClick(){} 对于文档中的任意位置，请单击。但这也表明了元素。 当单击外部元素时，已经存在元素的一次单击事件，只认识到它不是元素。
浏览 18提问于2019-04-23得票数 0
这就是我想要做的：
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appResizeWindow]'
})
export class ResizeWindowDirective {
@Input('appResizeWindow') line_ChartOptions: {};
constructor() { }
@HostListener('window:resize', ['$eve
浏览 1提问于2017-07-16得票数 7
回答已采纳
我有一个方法可以自动生成一组svg，并将它们注入到我的身体中：
async generateRandomTextItems(count: number): Promise<string[]> {
const availableFontResponses = [];
const allAvailableFonts = this.fontsService.fonts.getValue();
const allAvailableTerms = UtilService.LEFT_WORDS;
for (let i = 0; i < count; i++) {
浏览 0提问于2020-07-15得票数 0
有没有办法在没有window.location.reload()和ngOnInit()的情况下重新加载我的Angular 11应用程序？ window.location.reload()让Chrome重新加载标签，这不是我想要的结果。ngOnInit()在我的应用程序中导致了一些奇怪的bug。 我希望有一个类似于window.location.reload()的东西，但这不会刷新Chrome标签。 有什么解决方案吗？ 提前谢谢。
浏览 15提问于2021-07-19得票数 0
回答已采纳
我最近使用了angular4，我想把代码代码从angular4中的滴答服务中获取，代码是
import { Injectable } from '@angular/core';
@Injectable()
export class TickerService {
constructor() { }
getTickerList()
{
return[{img:"../../assets/images/profile-pics.jpg",title:"Added New
Post-1
浏览 1提问于2017-09-20得票数 0
回答已采纳
6回答
我设置了一个service来跟踪登录用户。该服务返回一个可观察的组件，并通知subscribe给它的所有组件(到目前为止，只有一个组件订阅它)。
服务：
private subject = new Subject<any>();
sendMessage(message: boolean) {
this.subject.next( message );
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
根应用程序组件：(此组件订阅可观察到的)
ngAfterVi
浏览 10提问于2017-11-01得票数 14
回答已采纳
ngAfterViewInit()，ngafterContentInit()，ngAfterViewChecked()和constructor()？与ngOnInit()有什么区别？我们如何在角2中实现它们？他们的目的和用途是什么？在哪里所有这些措施都将对实施这些目标有用？
谢谢。
浏览 4提问于2017-09-20得票数 17
html
<video #v >
<source src="{{video.videoUrl}}" type="video/mp4" />
</video>
<button (click)="getDuration(v)">
Get Duration
</button>
<input type="range" step="0.1" min="0"
max="getDuration(v)"&
浏览 2提问于2017-08-28得票数 2
回答已采纳
我使用的是角4，我正在检查用户是否改变了任何值？在我的页面中有100多个控件(文本框、下拉列表和可编辑网格)。
我只需要检查是否有任何值被更改。为此，我正在使用下面的代码，但是它在分页时被多次调用。
如何避免这种情况，我需要值，只有当用户更改任何值时，才会执行。
import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";
@ViewChild('
浏览 0提问于2018-05-10得票数 3
我在一个Angular项目中工作，我想通过id在Angular中创建一个滚动视图。我写了这个方法： ngOnInit() {
setTimeout(() => {
if (this.router.url.includes('contact')) {
let abc ;
abc= document.getElementById("contact")
abc.scrollIntoView();
}
if (this.router.url ==
浏览 58提问于2021-03-11得票数 0
回答已采纳
2回答
如何在angular 2中使用主机监听器和主机绑定？我尝试了下面的主机监听器，但它总是显示Declaration expected错误。
app.component.ts：
import {Component, EventEmitter, HostListener, Directive} from 'angular2/core';
@Directive({
selector: 'button[counting]'
})
class HostSample {
public click = new EventEmitter();
@Hos
浏览 3提问于2016-01-11得票数 41
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
