Angular v 17 中信号值发生变化时如何运行函数

Question

我有一个父组件，有多个子组件和一些不是直接后代的组件。父组件中有一个数据作为用户的输入。

每当父组件中的输入值发生更改时，服务层中就会调用一个函数来设置信号中的输入值。该信号类型变量是该服务类的类变量。类变量的类型是

WritableSignal<Number>

，当输入值改变时，使用

.set()

方法设置它。

所有与信号相关的东西都是从

@angular/core

导入的。

所有子组件和父组件的间接后代都可以访问服务类，并且需要此信号类型变量从后端获取数据。

我希望每当输入变量的值发生变化并依次更新信号值时，使用此信号的所有子组件和其他组件都应该运行其函数以再次获取数据。

我怎样才能做到这一点。

Answer 1

我对信号不太熟悉，但看起来只有角度组件模板可以监听信号值。 Signals 的文档处于功能预览阶段，因此可能尚未完全充实。

您可以使用

Subject

或

BehaviorSubject

以及 RxJS 来完成您想要的任务。

有输入的组件可以调用：

subject.next(new value)

监听组件可以监听如下：

subject.asObservable().pipe(
   switchMap((newValue) => {
     return this.httpClient.get...
   )
)

这将返回一个

Observable

。如果您想在子组件中显示 API 调用的结果，您可以将 Observable 设置为组件类上的字段，并使用

| async

管道将其显示在 Angular 模板中。

如果您需要对该值执行一些其他操作（并且您无法在

pipe

中执行此操作），您可以使用

observable.subscribe(...)

方法来监听更改。如果您这样做，请务必在您的

unsubscribe()

方法中

ngOnDestroy

。

您可能还会发现其他一些 rxjs 运算符很有用，例如

distinctUntilChanged()

忽略输入中的重复值，

shareReplay()

防止为每个子组件侦听多次触发 API 调用。