代码之家 › 专栏 › 技术社区 › Sidharth Bajpai

observable to Signal与更新observable订阅内的Signal值之间的差异

angular-signals angular-observable angular17 rxjs angular

1

Sidharth Bajpai · 技术社区 · 2 年前

这样做有什么区别、优势或正确的方法吗?

假设我有一个可观察的,我可以从后端调用、服务或通过GUI事件(如滚动事件)接收它。

我在模板中有一个属性,它取决于可观察到的。我正计划通过一个信号为那处房产提供价值。

所以我想通过我的可观察到的,每当它收到一个值时,把这个值传递给那个信号。

我发现了两种通过可观察到的来为信号提供价值的方法:-

通过修改可观察到的订阅方法内部的信号值。
通过将可观察到的转换为信号并直接使用该信号。

演示两种方式的最小示例:-

Example On 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>

使用一种方法与使用另一种方法相比有什么优势或区别吗?谢谢

1 回复 | 直到 2 年前

1

Naren Murali 2 年前

订阅的优点是可获得 error , subscribe 和 next ,在API失败时为您提供细粒度控制。

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

不同于只有 下一个 行动

但对于这个特定的场景(显示API的值),信号方法更好,因为。

更少的代码
可读性更强
无需订阅取消订阅,信号自动处理( toSignal 自动处理取消预订)

反之适用于订阅。

缺点是:

如果不添加更多代码,我们将无法处理错误场景,我知道这是可能的,但订阅更简单。