1) Сигналы против RxJS: создание переменной Signal с нуля в Angular 16 и сравнение ее с Observable.

В примере, где у нас есть боковое меню и верхнее меню, каждый раз, когда мы нажимаем кнопку, верхнее меню сообщит боковому меню свернуть:

С RxJS:

Эта связь осуществляется в сервисе с использованием субъекта и наблюдаемого, где каждый раз, когда мы нажимаем кнопку, вызывается следующий, который передает отправленное значение подписанному наблюдаемому. Компонент меню боковой панели будет просто подписан и будет использовать это свойство в HTML. Сначала мы создаем объект в сервисе, затем создаем из него наблюдаемый объект и вызываем next для передачи выданного значения:

С сигналами:

Это можно сделать просто с помощью сигналов. Сигналы были созданы в Angular для достижения лучшей производительности в некоторых более простых случаях. Они импортированы из @angular/core.

Вам необходимо объявить сигнал, и каждый раз, когда мы обновляем этот сигнал, мы вызываем для него set. В компоненте бокового меню нам просто нужно сослаться на это свойство, а чтобы использовать сигнал в HTML, нам нужно заключить его в круглые скобки, чтобы получить его значение, поскольку именно так используются сигналы.

Мы также можем выполнить обновление, которое имеет дополнительное преимущество, сообщая нам предыдущее значение. Для этого мы указываем, что он получает предыдущее значение и его тип, а с помощью стрелочной функции указываем новое значение, которое является отрицательным новым значением:

Существуют также способы преобразования наблюдаемых в сигналы и сигналов в наблюдаемые:

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

RxJS — это библиотека Microsoft, а не Angular. Напротив, Signals — это библиотека Angular, которая обеспечивает больший контроль и производительность, поскольку позволяет Angular точно знать, какая часть изменилась при изменении состояния. Это позволяет избежать повторной визуализации всего компонента, концентрируясь только на этой конкретной части.

2) Новый упрощенный способ отказа от подписки с помощью takeUntilDestroyed от RxJS в Angular 16.

В Angular важно отписаться от наблюдаемых. В примере в OnInit мы храним подписку, а в OnDestroy — отписку.

Старый способ заключался в том, чтобы сохранить переменную с подпиской, а во время подписки сохранить ее в этой переменной и уничтожить эту подписку в OnDestroy:

Подробное объяснение: создается свойство типа Subscription (из RxJS). Это свойство инициализируется в ngOnInit, присваивая ему ссылку на подписку при ее создании. Затем в ngOnDestroy подписка отменяется. Если компонент не определил переменную подписки, необходимо обработать ошибку либо с помощью вопросительного знака, чтобы проверить, определена ли она, либо с помощью условного выражения.

Теперь это можно сделать проще, без создания OnDestroy или переменной подписки, используя оператор RxJS takeUntilDestroyed. Это автоматически отменяет подписку, когда компонент вот-вот будет уничтожен. Важно внедрить сервис DestroyRef и передать его, чтобы он знал, когда компонент будет уничтожен:

Подробное объяснение: теперь, в случае, если мы не отписываемся, мы добавляем канал RxJS и отправляем ему takeUntilDestroyed(), оператор NEW, который требует от нас передать DestroyRef, который является сервисом (из @angular /core), который мы можем внедрить в конструктор.

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

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

Важное замечание: когда мы подписываемся на HTTP-запрос, отписываться не обязательно, так как это делается автоматически.

3) Эффект сигнала в Angular. Прослушивание изменений в сигнале.

В примере у нас есть сигнал, который возвращает логическое значение, а в приведенном ниже методе он обновляется с помощью обновления:

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

Например, вместо журнала консоли мы можем сохранить значение в локальном хранилище и создать его экземпляр с этим значением. Это особенно полезно при работе с кодом, который мы не знаем и не знаем, из скольких мест он модифицируется.

— Заметки на основе курса Angular от EfisioDev —