Angular Mouseover事件在使用时会绑定大量事件处理程序,这可能会导致变更检测机制不断触发,导致性能问题。常见的解决方法包括以下几种:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
constructor(private cdRef: ChangeDetectorRef) {}
onMouseOver() {
this.cdRef.detectChanges();
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
onMouseEnter() {
// do something
}
}
import { Component, NgZone } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
constructor(private ngZone: NgZone) {}
onMouseOver() {
this.ngZone.runOutsideAngular(() => {
// do something
});
}
}
上一篇:Angular模态路由架构
下一篇:Angular模型和接口的组织