所以我一直在学习和使用Signals在Angular 上,这是令人兴奋的.然而,在一些用例中,我觉得存在一些摩擦.我想不出一个好的模式,当您有一个包含input signals的组件,并且您想要在某个输入值发生变化时触发重新获取数据.

computed显然不是一个好办法,因为它们不可能是同步的.和effect,根据文件,不应该修改组件状态.因此,这似乎也是不可能的.而ngOnChanges正在(长期)被弃用,取而代之的是基于信号的组件和无区域.

请考虑以下组件:

@Component()
export class ChartComponent {
    dataSeriesId = input.required<string>();
    fromDate = input.required<Date>();
    toDate = input.required<Date>();

    private data = signal<ChartData | null>(null);
}

每当输入信号之一获得新值时,我希望触发重新获取数据,并将私有data信号的值设为update.

人们将如何处理这件事?最佳实践是什么?是否生效并绕过规则以修改状态?

推荐答案

我使用ANGLE的rxjs-interop将id输入信号转换为Observable,然后使用switchMap获取结果,然后将结果转换回信号,如下所示:

import { toObservable, toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-chart',
  standalone: true,
  template: `
    {{data()}}
  `,
})
export class ChartComponent {
  dataSeriesId = input.required<string>();
  data = toSignal(
    toObservable(this.dataSeriesId).pipe(switchMap((id) => this.fetchData(id))),
    {
      initialValue: null,
    }
  );

  private fetchData(id: string) {
    return of('Example data for id ' + id).pipe(delay(1000));
  }
}

StackBlitz上的工作示例

Typescript相关问答推荐

Angular 行为:属性类型从SignalFunction更改为布尔

基于平台的重定向,Angular 为16

如何表示多层深度的泛型类型数组?

如何在Reaction路由v6.4加载器和操作中获得Auth0访问令牌?

类型脚本返回的类型包含无意义的泛型类型名称

MatTool提示在角垫工作台中不起作用

如何在typescript中为this关键字设置上下文

->;Boolean类型的键不能分配给类型Never

17个Angular 的延迟观察.如何在模板中转义@符号?

VITEST警告:当前的测试运行器不支持After Each/teardown挂钩

如何在具有嵌套数组的接口中允许新属性

我可以将一个类型数组映射到TypeScrip中的另一个类型数组吗?

仅当类型为联合类型时映射属性类型

打字:注解`是字符串`而不是`布尔`?

我的类型谓词函数不能像我预期的那样工作.需要帮助了解原因

换行TypeScript';s具有泛型类型的推断数据类型

如何根据Typescript 中带有泛型的对象嵌套键数组获取数组或对象的正确类型?

在对象类型的类型别名中,属性是用分号 (;) 还是逗号 (,) 分隔的?

Typescript 编译错误:TS2339:类型string上不存在属性props

从接口推断模板参数?