Question

我有一个名为custom-input的组件，如下所示：

<div>
  <input type="text">
</div>

一个名为wrapper的组件看起来像这样：

<div appFocusEvent (appFocusValue)="someFunction($event)">
  <custom-input></custom-input>
  <button [disabled]="isButtonEnabled">Next</button>
</div>

并创建了一个指令focusDirective来读取焦点/模糊事件：

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appFocusEvent]',
})
export class FocusEventDirective {
  @Output() appFocusValue = new EventEmitter<boolean>();

  constructor() {}

  @HostListener('focus', ['$event'])
  onFocus(event: any) {
    this.appFocusValue.emit(true);
  }

  @HostListener('blur', ['$event'])
  onBlur(event: any) {
    console.log('blur', event);
    this.appFocusValue.emit(false);
  }
}

当焦点或模糊事件触发时，我需要获取值，以便可以禁用或启用该按钮。如果我尝试在普通标签内使用该指令，它将起作用！但是，如果在包装器组件中尝试使用该指令，则焦点事件将绑定到组件本身。问题是：指令如何在上述组件中设置？

PS。我必须设置custom-input而不是单个input标记，因为它具有验证属性和样式。而且我也不能修改输入组件本身（我已经尝试了事件发射器，并且可以工作，但是我不能修改它）

Angular2-指令在组件中不起作用

0 个答案: