如何在 Angular 6 中使用 Observables 而不是 document.querySelector

Question

我需要在 Angular 中使用 Observables 而不是 document.querySelector 6. 我的代码现在看起来像这样：

onInputChange(result: string) {

const x = document.querySelector('.x') as HTMLElement;

if (result[0] === '4') {
  x.style.backgroundColor = '#ffffff';


} else if (result[0] === '5' && result[1] === '5') {
  x.style.backgroundColor = '#000000';


} else if (result[0] === '_') {
  x.style.backgroundColor = '#AFB8BD';

}

result = result.replace(new RegExp('u', 'g'), 'x');
(<HTMLInputElement>document.getElementById('someInput')).value = result;
}

实际上，主要的想法是改变"result"输入的第一个数字的背景颜色有人可以帮我使用 Observables 吗？我是前端的新手，很抱歉这个问题

Answer 1

你问题的问题是，我们真的不知道你的组件是什么

Angular 为您提供两种与组件和事件交互的方式

& fromEvent (rxjs) 你会得到一个元素参考来与你的 component/snippet 互动和聆听。然后你用来自 rxjs

fromEvent

const yourEvent = fromEvent(button, 'click');

Component interaktion with Input and Ouputs 阅读此文档。 Angular 为您提供了通过 [input] 和 (ouptut) 事件与组件中的数据流和事件进行交互的可能性。

示例：

    <input type="text" #comp (keyup)="onChange(comp.value)"/>

Answer 2

基本上我认为您的问题并不围绕可观察对象。您希望更改元素的某些颜色作为对某些其他元素操作的响应（让我们假设点击，因为您的代码段中未提供）

只需使用一些标准的 onClick 事件侦听器来设置其他组件样式：

<button (click)="onClick()">
<div [class]="classFromController"

在控制器中：

onClick() {
  if (/* any logic you wish */) {
    this.classFromController = 'black';
  } else if (/* other logic */) {
    this.classFromController = 'white';
  }
}

在你的css

.black {
  backgroundColor = '#ffffff';
}
.white {
  backgroundColor = '#000000';
}

避免内联样式，因为它们被认为是糟糕的编码风格并且很容易避免。

如果出于某些特殊原因您必须使用可观察对象，请考虑使用 Observable.fromEvent()，如下所述：

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent

如何在 Angular 6 中使用 Observables 而不是 document.querySelector

How to use Observables instead of document.querySelector in Angular 6

getelementbyid

reactive-programming

observable

rxjs

angular