Директивное событие не получено компонентом - PullRequest
Новая
       22

Директивное событие не получено компонентом

0 голосов
/ 06 декабря 2018

У меня есть функция поиска пользователя с директивой debounce в поле термина поиска: 

<mat-form-field>
    <input matInput [(ngModel)]="searchTerm" (appOnDebounce)="search($event)" placeholder="Search..." autocomplete="off">
</mat-form-field>

Предполагается вызвать метод: 

search(searchTerm: string): void {
  console.log('Searching for ' + searchTerm);
}

Директива реализована как: 

@Directive({
  selector: '[ngModel][appOnDebounce]'
})
export class DebounceDirective implements OnInit, OnDestroy {

  @Output()
  public debounceEvent: EventEmitter<string>;

  @Input()
  public debounceTime = 300;

  private isFirstChange = true;
  private subscription: Subscription;

  constructor(public model: NgControl) {
    this.debounceEvent = new EventEmitter<string>();
  }

  ngOnInit() {
    this.subscription = this.model.valueChanges
      .debounceTime(this.debounceTime)
      .distinctUntilChanged()
      .subscribe((modelValue: string) => {
        if (this.isFirstChange) {
          this.isFirstChange = false;
        } else {
          console.log(modelValue);
          this.debounceEvent.emit(modelValue);
        }
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

Директива правильно генерирует события, поскольку оператор logger отображает набранную строку, но метод search(searchTerm: string): void {} никогда не вызывается.

1 Ответ

0 голосов
/ 07 декабря 2018

Измените декаратор свойства debounceEvent следующим образом 

@Output('appOnDebounce')
public debounceEvent: EventEmitter<any>;

Пожалуйста, посмотрите здесь пример решения https://ng2 -debounce-sample.stackblitz.io

...