如果在父组件和子组件中都添加了相同的监听器事件,有两种可能性:
- 如果用户从父组件触发事件,只会执行父组件中的事件。
- 如果用户从子组件触发事件,则会同时执行子组件和父组件中的事件。将窗口从监听器事件中移除,这样子组件就会先于父组件执行。
如果不想从子组件执行父组件,则可以传递一些变量到父组件来控制事件。
工作演示,我使用了转义事件作为示例。
父组件:
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");
}
}
}