Об subscribe() vs async

Задуматься об этом выборе меня заставило архитектурное rxjs tslint правило rxjs-prefer-async-pipe :

Disallows the calling of subscribe within an Angular component.

Оно гласит, что запрещено вызывать метод subscribe() в Angular компонентах. Стало интересно откуда ноги растут.

Недавно наткнулся на статью The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe, где подбробно разбираются оба подхода.

subscribe() vs async

Отобразить значение Observable возможно 2 способам:

  • Вручную: метод subscribe() -> сохранение состояние в коде компонента
    todos$.subscribe(todos => this.todos = todos)

    Метод требует ручной отписки, например takeUntil(destroy$) или unsubscribre().

  • Автоматически: | async pipe -> разворачивание состояние прямо в шаблоне компонента
    <li *ngFor="let todo of todos$ | async"></li>`

    Работает магия. Метод не требует ручной отписки.

В привидённой статье оказалось 2 интересных момента:

  1. Касательно OnPush стратегии обнаружения изменений.

    • Подписка на Observable вручную в хуке ngOnInit() не отображает изменений состояния в шаблоне. Требуется вручную вызывать markForCheck() внутри подписки.
    • !!! async работает с OnPush стратегией из коробки! Просто убедитесь, что всегда приходят новые объекты (immutable logic).
  2. Решение с несколькими | async pipes развёрнутых в одну переменную:

    multiple_async_pipes.png

P.S. Такие скриншоты кода делаются через сервис https://carbon.now.sh/


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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

08 января 2019 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular

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

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

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular