Angular 6 - 指令输出同时触发所有组件答案

【问题标题】：Angular 6 - Directive Output is firing for all components in the same momentAngular 6 - 指令输出同时触发所有组件
【发布时间】：2019-12-11 01:30:39
【问题描述】：

我有一个包含四个 datePicker 组件的表单，用户只能从日历中选择日期，但不能对其进行编辑。我创建了一个指令，允许在用户单击canc & backspace 按钮时取消日期。

现在的问题是该指令的输出同时触发了所有四个 datePicker 组件，并且所有这些组件的日期都被取消了。

这里是指令的代码：

@Directive({
  selector: '[atenaAllowDeleteOnly]',
})
export class AllowDeleteOnlyDirective {

  @Output() updatedVal = new EventEmitter(); // emitted Current Value
  constructor(private model: NgModel) { }

  @HostListener('window:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    event.preventDefault();
    if ((event.keyCode == 8 || event.keyCode == 46)) {
      this.updatedVal.emit(null);
    }

  }

}

日期选择器组件：

<div class="input-group body-input">
    <button class="close" type="button"></button>
    <input [readonly]="false" 
           id ="date-{{id}}" 
           atenaAllowDeleteOnly
           (updatedVal)="deleteDate($event)"
           (ngModelChange)="onSelectDate($event)" 
           attr.aria-describedby="{{label}}" 
           class="form-control"
           [class.datePicker-border]="!_isReadOnly" 
           placeholder="gg/mm/aaaa" [name]="name"   
           [(ngModel)]="valueApp" ngbDatepicker #d="ngbDatepicker">
    <img src="../../../../../Atena/assets/img/icons/calendar.svg"
         (click)="_isReadOnly ? null :  d.toggle()" alt>
 </div>

deleteDate 方法同时触发所有 DatePicker 组件

【问题讨论】：

标签： javascript angular typescript angular6 angular2-directives

【解决方案1】：

您的主机侦听器位于 window:keydown，这意味着您正在侦听每个指令中整个窗口上的所有 keydown 事件。

只需将其更改为：

@HostListener('keydown', ['$event'])

让它只是元素 keydown

【讨论】：