Как использовать Observables вместо document.querySelector в Angular 6 - PullRequest
Новая
       11

Как использовать Observables вместо document.querySelector в Angular 6

0 голосов
/ 08 ноября 2018

Мне нужно использовать Observables вместо document.querySelector в Angular 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;
}

Собственно, основная идея - изменить цвет фона относительно первого числа «результата» ввода. Может ли кто-нибудь помочь мне использовать Observables? Я новичок во Фронтенде, извините за этот вопрос

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

В основном я думаю, что ваша проблема не вращается вокруг наблюдаемых. Вы хотите изменить какой-либо цвет элемента в ответ на какое-либо другое действие элемента (предположим, при нажатии, поскольку это не предусмотрено в вашем фрагменте)

Просто используйте стандартный прослушиватель событий 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

0 голосов
/ 08 ноября 2018

Проблема вашего вопроса в том, что мы на самом деле не знаем, какие у вас компоненты

Angular предоставляет вам два способа взаимодействия с компонентом и событиями

  • Как ссылаться на элементы & fromEvent (rxjs) Вы получаете ссылку на элемент для взаимодействия и прослушивания вашего компонента / фрагмента. Затем вы прослушиваете событие с помощью оператора fromEvent из rxjs 

const yourEvent = fromEvent(button, 'click');
  • Взаимодействие компонентов с Input и Ouputs Прочтите эту документацию. Angular предоставляет вам возможность взаимодействовать с потоками данных и событиями из компонентов и в них с помощью событий [input] и (ouptut).

Пример: 

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