我有两个组件——父组件和子组件。 我已将 hoSTListener 附加到两个组件以检测关键事件。 我想检测两个组件中的空格键事件。如果用户在子组件文本字段中按下空格键,那么我希望父组件什么也不做。但是,如果用户不在子组件文本字段中并按下空格键,那么我希望父组件触发一个函数。
export class ParentComponent {
constructor() { }
@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
console.log("PARENT", event.keyCode);
}
}
export class ChildComponent {
constructor() { }
@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
console.log("CHILD", event.keyCode);
}
}
这里事件被捕获,但按特定顺序 - 首先是 PARENT,然后是 CHILD。我希望这些事件是什么 - 首先由 CHILD 捕获,以便我可以决定在父组件中做什么或可以停止事件传播。
最佳答案
如果我们在父组件和子组件中添加相同的监听器事件,则有两种可能性。
- 如果用户从父组件触发,则只执行父组件中的事件
- 如果用户从子组件触发,则子组件和父组件中的事件都将被执行。从监听器事件中删除窗口,这样子组件将在父组件之前先执行。
如果你不想从子进程执行父进程,传递一些变量给父进程来控制事件。
Working demo ,我使用逃逸事件作为样本
父组件
import { Component } from '@angular/core';
import { HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
color : String='green';
child : Boolean=true;
@HostListener('keydown', ['$event']) triggerEsc(e: KeyboardEvent) {
if(e.keyCode===27 && this.child===true){
console.log("global esc");
alert("parent esc");
}else{
this.child=true;
}
}
public doSomething(child: any):void {
this.child=child;
}
name = 'Angular 5';
}
父模板
<input placeholder="Parent Can't copy/paste" type="text" appBlockCopyPaste/>
<hello (child)="doSomething($event)"></hello>
带模板的子组件
import { Component, Input,Output , EventEmitter} from '@angular/core';
import { HostListener } from '@angular/core';
@Component({
selector: 'hello',
template: `<input placeholder="Child" type="text" appBlockCopyPaste/>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Output() child: EventEmitter<any> = new EventEmitter<any>();
@HostListener('keydown', ['$event']) triggerEsc(e: KeyboardEvent) {
if(e.keyCode===27){
this.child.emit(false);
console.log("global esc");
alert("child esc");
}
}
}
关于从子组件到父组件的 Angular HostListener 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47654635/