Как настроить таргетинг на элемент HTML с помощью rxjs fromEvent в Angular 6 - PullRequest
Новая
       11

Как настроить таргетинг на элемент HTML с помощью rxjs fromEvent в Angular 6

0 голосов
/ 05 сентября 2018

Issue

Я использовал оператор ngrx fromEvent для создания Observable из 2 входных текстовых полей, я использовал document в качестве цели, и это хорошо, но теперь я хочу настроить таргетинг только на одно поле ввода. Я не уверен, что использовать вместо документа для таргетинга только на одно поле ввода.

Что я сделал до сих пор, чтобы получить цель

  • Используется document.getElementByID ('someID')
  • Используется ElementRef
  • Используется document.querySelector ('someID')

код

Живой редактор StackBlits 

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `<input type="text">
             <input type="text">`
})
export class AppComponent {
  ngOnInit() {
    fromEvent(document, 'keyup')
      .subscribe(res => console.log(res.target.value));
  }
}

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 05 сентября 2018

Вы можете задать поле input, которое вы хотите наблюдать, как переменную шаблона.

Вы можете использовать затем @ViewChild, чтобы получить доступ к этому input. А затем используйте для него свойство nativeElement.

Теперь свойство nativeElement будет доступно только после инициализации представления. Таким образом, вы можете использовать AfterViewInit Component Lifecycle Hook для доступа к нему. 

import { Component, ViewChild, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `<input #toTarget type="text">
             <input type="text">`
})
export class AppComponent {

  @ViewChild('toTarget') toTarget: ElementRef;

  ngAfterViewInit() {
    fromEvent(this.toTarget.nativeElement, 'keyup')
      .subscribe(res => console.log(res.target.value));
  }
}

Вот Обновленный StackBlitz для вашей ссылки.

...