使用主机事件侦听器的事件冒泡

Question

我已经构建了一个指令，它使用主机事件侦听器订阅键盘事件。当按下转义键时，我正在触发这样的输出事件

    @HostListener('document:keyup', ['$event'])
    handleKeyboardEvent(kbdEvent: KeyboardEvent) {
       if (kbdEvent.keyCode === 27) {
            this.CloseEvent.emit();
       }
    }

我对子元素有这个指令。当按下转义键时，我只想为新订阅的元素触发输出事件。问题是当我单击转义键时，事件会根据层次顺序触发。我这里做了一个demo：https://plnkr.co/edit/FfnHAtxl2zcHsu0JilKt

重现步骤：

1. 添加多个子元素
2. 点击 Escape 会关闭所有元素

预期行为：

1. 当在最后添加的子元素上单击 Escape 键时需要触发事件

Answer 1

一种方法是发送KeyboardEvent 和close 事件。然后您可以检查事件是否将defaultPrevented 设置为true，如果没有，则执行删除和preventDefault。

我做了一些优化。你可以只使用'document:keyup.ESC'绑定，你可以立即设置(close)，它会使用CloseDirective

plnkr

我的应用

@Component({
  selector: 'my-app',
  template: `
  <h4>Add Multiple Child And Click On Escape key</h4><br>
    <div *ngFor="let child of childArray;let i = index">
      <div style="display:flex;flex-direction:row">
          <my-chid (close)="onClose($event)" [index]="child"></my-chid>
          <button (click)="deleteChild(i)">Delete</button>
      </div>
    </div>
    <button (click)="addChild()">Add Child</button>
  `,
})
export class App {

  childArray: any[] = [];

  addChild(): void {
    this.childArray.push(this.childArray.length);
  }

  onClose(event: KeyboardEvent): void {
    if (!event.defaultPrevented) {
      event.preventDefault();
      this.deleteChild(this.childArray.length - 1);
    }
  }

  deleteChild(index: number): void {
    this.childArray.splice(index, 1);
  }
}

我的孩子

@Component({
  selector: 'my-chid',
  template: `
    <div>
       I am child {{index}}
    </div>
  `,
})
export class MyChild {

  @Input()
  public index: number; 

}

关闭指令

@Directive({
    selector: '[close]'
})
export class CloseDirective {

    @Output() close: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();

    @HostListener('document:keyup.ESC', ['$event'])
    handleKeyboardEvent(kbdEvent: KeyboardEvent) {
      this.close.emit(kbdEvent);
    }
}