Как я могу проверить текущее значение входа с помощью Eventemitter? - PullRequest
Новая
       24

Как я могу проверить текущее значение входа с помощью Eventemitter?

1 голос
/ 05 мая 2019

У меня есть многократно используемый угловой компонент, который включает в себя текстовый ввод. Этот компонент просто принимает функцию для обработки своего значения @Output.

Я хочу добавить класс CSS к этому компоненту, если ввод текста заполнен. Я заставил его работать, но было неправильно использовать как наблюдаемое, так и значение класса (searchQuery и searchQuery $ в фрагменте кода) для отслеживания ввода. Как я могу улучшить этот код?

Вот HTML с вводом. Обратите внимание, что значок проверяет наблюдаемое, чтобы увидеть, должен ли он включать «сфокусированный» класс: 

<input #input placeholder="Search services..." (change)="setSearchQuery($event.target.value)" />
<div class="icon-container" (click)="outputSearchQuery(searchQuery)">
  <i [class]="!(searchQuery$ | async) ? 'fa fa-search search-icon' : 'fa fa-search search-icon focused'"></i>
</div>

А вот файл TS: 

@Component({
  selector: 'search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.scss'],
})
export class SearchBarComponent implements OnInit {
  @Output() submit: any = new EventEmitter<string>();
  @ViewChild('input') protected input: ElementRef;

  public searchQuery: string = '';
  public searchQuery$: Observable<string>;

  ngOnInit() {
    this.searchQuery$ = fromEvent(this.input.nativeElement, 'input').pipe(map((event: any) => event.target.value));
  }

  public setSearchQuery(newVal: string) {
    this.searchQuery = newVal;
  }

  public outputSearchQuery() {
    this.submit.emit(this.searchQuery);
  }
}
...