Question

我有两个组件 - Parent和Child组件。我已将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捕获，以便我可以决定在父组件中做什么或者可以阻止事件传播。

Answer 1

如果我们在父组件和子组件中添加相同的侦听器事件，则有两种可能性。

如果用户从父组件触发，则只执行父组件中的事件
如果用户从子组件触发，则将执行子组件和父组件中的事件。从侦听器事件中删除窗口，以便在父组件之前首先执行子组件。

如果您不想从子节点执行父节点，请将一些变量传递给父节点以控制事件。

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事件

1 个答案: