Обратный вызов рендерера не вызывается, что происходит? - PullRequest
Новая
       12

Обратный вызов рендерера не вызывается, что происходит?

0 голосов
/ 21 октября 2018

Я пытаюсь получить элемент Select html, дочерний элемент компонента X, показывающий и скрывающий в ответ на событие фокусировки и размытия этого компонента X. На компоненте X я попытался установить слушателя с помощью: this.elementRef.nativeElement.addEventListener ('focus', myFunc)

Но не работает.Так что я в настоящее время пытаюсь с this.renderer.listen, но не работает ни.Вот компонент TS и шаблон:

Component.ts 

import { Component, ContentChild, ElementRef, Renderer2, AfterViewInit, OnDestroy } from '@angular/core';
import { InputRefDirective } from '../input-ref/input-ref.directive';

@Component({
  selector: 'input-with-suggestion',
  templateUrl: './input-with-suggestion.component.html',
  styleUrls: ['./input-with-suggestion.component.css']
})
export class InputWithSuggestionComponent implements AfterViewInit, OnDestroy {
  @ContentChild(InputRefDirective)
  inputRef: InputRefDirective;

  hiddenSuggestions = false;

  focusListener: () => void;
  blurListener: () => void;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
  }

  ngAfterViewInit() {
    this.blurListener = this.renderer.listen(this.elementRef.nativeElement, 'blur', this.hideSuggestions.bind(this) );
    this.focusListener = this.renderer.listen(this.elementRef.nativeElement, 'focus', this.showSuggestions.bind(this) );
  }

  ngOnDestroy() {
    this.blurListener();
    this.focusListener();
  }

  hideSuggestions(): void {
    console.log('hide');
    this.hiddenSuggestions = true;
  }

  showSuggestions(): void {
    console.log('show');
    this.hiddenSuggestions = false;
  }

  get suggestions() {
    return this.inputRef.data;
  }
}

И component.html: 

<ng-content></ng-content>

<select *ngIf="(suggestions.length > 0) && !hiddenSuggestions" [size]="suggestions.length" style="color: black; position: absolute; display: block; width: auto; overflow: hidden" multiple>
  <option *ngFor="let suggestion of suggestions" value="suggestion.value">
    {{suggestion.text}}
  </option>
</select>

Я что-то упускаю из виду?Также оказалось, что HostListener не работает с @Component, а только с @Directive.Я тоже не прав?

Спасибо!

1 Ответ

0 голосов
/ 30 октября 2018

Экземпляр InputWithSuggestionComponent был недоступен, странным образом скрыт его содержимым (поэтому входные данные).Установите слушатель на nativeElement.querySelector ('input'), а не nativeElement исправил его.

...