当父组件触发子组件事件多次时,可以采取以下解决方法:
// 父组件
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent {
@ViewChild(ChildComponent) childComponent: ChildComponent;
triggerChildEvent() {
// 确保只触发一次子组件事件
this.childComponent.childEvent.emit();
}
}
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Output() childEvent: EventEmitter = new EventEmitter();
handleChildEvent() {
console.log('子组件事件触发');
}
}
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Output() childEvent: EventEmitter = new EventEmitter();
isEventHandled: boolean = false;
handleChildEvent() {
if (!this.isEventHandled) {
console.log('子组件事件触发');
this.isEventHandled = true;
}
}
}
这样,当父组件触发子组件事件多次时,子组件只会处理第一次触发的事件,后续的事件将被忽略。