Angular2 - Директива не работает в компоненте - PullRequest
Новая
       19

Angular2 - Директива не работает в компоненте

0 голосов
/ 06 апреля 2019

У меня есть компонент с именем custom-input, который выглядит следующим образом: 

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

И один компонент, называемый оболочкой, выглядит следующим образом: 

<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);
  }
}

Мне нужно получить значение при срабатывании событий фокуса или размытия, чтобы я мог отключить или включить кнопку. Если я попробую директиву внутри обычного тега, это сработает !, но если попробовать его в компоненте-обертке, событие focus будет привязано к самому компоненту. Вопрос в следующем: как может работать директива, установленная в компоненте, как указано выше?

PS. Я должен установить пользовательский ввод, а не один тег ввода, поскольку он имеет свойства и стили проверки. Также я не могу изменить сам компонент ввода (я пробовал с источниками событий, и это работало, но я не могу изменить его)

...