RxJS Pipeable Operators

Опубликовано в Angular, JavaScript, RxJS • 21 февраля 2018 г. • 1 мин. на чтение

Использование в 5.4

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

Observable.of(1, 2, 3)
    .filter(x => x % 2 === 0)
    .map(x => x + x)
    .subscribe(x => console.log(x));

Использование в 5.5

import { of } from 'rxjs/observable/of';
import { filter, map } from 'rxjs/operators';

of(1, 2, 3).pipe(
    filter(x => x % 2 === 0)
    map(x => x + x)
).subscribe(x => console.log(x));

Зачем использовать pipeable operators?

Tree-shakable. Операторы, которые являются частью прототипа Observable и не используются в коде, во время сборки не удаляются webpack'ом или другим бандлером.
Упрощается создание собственных операторов
Транспайлеры и линтеры предлагает больше подсказок

Pipeable Operators

Похожие записи

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

Поисковый запрос с помощью RxJS

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

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

0 - dashboard
1 - карточка
2 и более - список

ng serve не срабатывает слежение за файлами

sudo sysctl fs.inotify.max_user_watches=256000

JS. String() vs toString()

const m = [1,'2',3];

m.toString();
String(m); // <===
"1,2,3"

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer