如何在 Angular 6 中使用 rxjs fromEvent 定位 HTML 元素

Question

问题

我使用 ngrx fromEvent 运算符从 2 个输入文本字段创建一个 Observable，我使用文档作为目标，这很好，但现在我只想定位一个输入字段。我不确定使用什么代替文档来仅针对一个输入字段。

到目前为止我为达到目标做了什么

二手 document.getElementByID('someID')
已使用 ElementRef
二手 document.querySelector('someID')

代码

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

提前感谢您的帮助。

Answer 1

您可以给要观察的 input 字段一个模板变量。

您可以使用 @ViewChild 访问 input。然后用nativeElement属性就可以了。

现在 nativeElement 属性只有在视图初始化后才能访问。因此，您可以使用 AfterViewInit 组件生命周期挂钩来访问它。

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

Here's an Updated StackBlitz for your ref.

Answer 2

如果您使用 Angular 8+ 阅读本文，在 ngOnInit 中引用 @ViewChild-elements 的正确方法是：

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

@Component({
  selector: 'my-app',
  template: `
    <input #yourTarget type="text">
    <input type="text">
  `
})
export class AppComponent implements OnInit, OnDestroy {
  @ViewChild('yourTarget', {static: true}) yourTarget: ElementRef;

  subscriptions = new Subscription();

  ngOnInit(): void {
    subscriptions.add(
      fromEvent(this.yourTarget.nativeElement, 'keyup')
        .subscribe(res => console.log(res.target.value))
    )
  }

  ngOnDestroy(): void {
    subscriptions.unsubscribe();
  }
}

注意@ViewChild 声明中的{static: true}：它导致 Angular 知道已在生命周期“OnInit”中的引用元素。

如何在 Angular 6 中使用 rxjs fromEvent 定位 HTML 元素

How to target an HTML element using rxjs fromEvent in Angular 6

rxjs

angular

angular6

rxjs6