Разница между наблюдаемым toSignal И обновлением значения сигнала внутри подписки Observable

Есть ли какие-либо различия или преимущества или правильный способ сделать это?

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

У меня есть свойство в шаблоне, которое зависит от этого наблюдаемого. Я планирую передать значение этого свойства через сигнал.

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

Я нашел два способа придать значение сигналу через наблюдаемую:

  1. Изменяя значение сигнала внутри метода подписки наблюдаемого.
  2. Путем преобразования наблюдаемой в сигнал и непосредственного использования этого сигнала.

Минимальный пример, демонстрирующий оба способа:

Пример на Stackblitz

import { Component, EventEmitter, OnDestroy, OnInit, Signal, signal } from '@angular/core';
import { toSignal } from "@angular/core/rxjs-interop";

@Component({
  selector: 'app-app',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

  // First Way
  nonToSignalButtonClick$ = new EventEmitter<number>();
  signalVar = signal<number>(-1);

  // Second Way
  toSignalButtonClick$ = new EventEmitter<number>();
  signalVarThroughToSignal = toSignal(this.toSignalButtonClick$, {initialValue: -1});

  ngOnInit() {
    // First Way
    this.nonToSignalButtonClick$.subscribe((v) => this.signalVar.update(initial => initial + v));
  }

  onDirectClick() {
    this.signalVar.update(initial => initial + 1);
  }

  // First Way
  onObservableClick() {
    this.nonToSignalButtonClick$.emit(1);
  }

  // Second Way
  onObservableToSignalClick() {
    this.toSignalButtonClick$.emit(this.signalVarThroughToSignal() + 1);
  }
}
<h1>{{ signalVar() }}</h1>

<button (click) = "onDirectClick()">Direct Signal Incrase</button>

<hr />

<button (click) = "onObservableClick()">Signal Increase Through Observable</button>

<hr />

<h1>Through toSignal: {{ signalVarThroughToSignal() }}</h1>

<button (click) = "onObservableToSignalClick()">Signal Increase Through Observable converted to Signal</button>

Есть ли какие-либо преимущества или различия между использованием одного подхода по сравнению с другим? Спасибо!

Не используйте EventEmitter вместо темы. Используйте их только для выходов.

Matthieu Riegler 04.06.2024 10:31
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
129
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Преимущества подписки — наличие error, subscribe и next, что дает вам детальный контроль в случае сбоя API.

...
.subscribe({
    next: () => {},
    error: (err: any) => {alert(err.message);},
    complete: () => {},
});

В отличие от сигнала, который имеет только next действие.

Но для этого конкретного сценария (показывающего значение из API) метод сигнала лучше, потому что:

  1. Меньше кода
  2. Более читаемый
  3. Отмена подписки не требуется, сигнал обрабатывает это автоматически (toSignal автоматически обрабатывает отмену подписки)

Обратное относится к подписке.

Минусы:

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

Вы можете добавить, что toSignal обрабатывает отмену подписки за вас.

Matthieu Riegler 04.06.2024 10:31

Другие вопросы по теме