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

Question

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

现在的问题是该指令的输出同时触发了所有四个 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>

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

Answer 1

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

只需将其更改为：

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

让它只是元素 keydown

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

Angular 6 - Directive Output is firing for all components in the same moment

javascript

angular

typescript

angular6

angular2-directives