Question

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

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

实际上，主要思想是更改有关“结果”输入的第一个数字的背景颜色有人可以帮助我使用Observables吗？我是Frontend的新手，很抱歉这个问题

Answer 1

您遇到的问题是，我们真的不知道您的组件是什么

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

How to reference elements和fromEvent (rxjs) 您将获得一个元素引用以与您的组件/片段进行交互并进行侦听。然后，使用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';
  }
}

在您的CSSs

.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

2 个答案: