Есть ли какие-либо различия или преимущества или правильный способ сделать это?
Допустим, у меня есть наблюдаемый объект, я могу получить его от внутреннего вызова, службы или через событие графического интерфейса, например событие прокрутки.
У меня есть свойство в шаблоне, которое зависит от этого наблюдаемого. Я планирую передать значение этого свойства через сигнал.
Поэтому я хочу передать значение этому сигналу через свою наблюдаемую всякий раз, когда он получает значение.
Я нашел два способа придать значение сигналу через наблюдаемую:
Минимальный пример, демонстрирующий оба способа:
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>
Есть ли какие-либо преимущества или различия между использованием одного подхода по сравнению с другим? Спасибо!





Преимущества подписки — наличие error, subscribe и next, что дает вам детальный контроль в случае сбоя API.
...
.subscribe({
next: () => {},
error: (err: any) => {alert(err.message);},
complete: () => {},
});
В отличие от сигнала, который имеет только next действие.
Но для этого конкретного сценария (показывающего значение из API) метод сигнала лучше, потому что:
toSignal автоматически обрабатывает отмену подписки)Обратное относится к подписке.
Минусы:
Вы можете добавить, что toSignal обрабатывает отмену подписки за вас.
Не используйте
EventEmitterвместо темы. Используйте их только для выходов.