Angular迁移至Signal与Input Signal后，如何实现服务端数据加载？

针对你遇到的Input Setter迁移到Signal的场景，完全不需要依赖ngOnChanges，这里提供几种符合Signal最佳实践的实现方式：

方案一：带信号写入权限的Effect（安全场景） #

虽然文档提示尽量避免在Effect中修改Signal，但只要修改的Signal不是当前Effect的依赖，就不会引发循环或变更检测问题。你的场景中，Effect仅依赖id这个Input Signal，修改loading和entity$不会触发Effect重新执行，因此可以安全启用allowSignalWrites：

@Component({
  // 组件元数据
})
export class EntityComponent {
  id = input<number>();
  loading = signal(false);
  entity$ = signal<Observable<Entity> | null>(null);

  constructor(private entityService: EntityService) {
    effect(() => {
      const currentId = this.id();
      if (!currentId) return;

      this.loading.set(true);
      const request$ = this.entityService.findById(currentId).pipe(
        finalize(() => this.loading.set(false))
      );
      this.entity$.set(request$);
    }, { allowSignalWrites: true });
  }
}

方案二：将实体数据转为Signal（无Observable） #

如果想完全摆脱Observable，直接用Signal管理实体状态，可以通过订阅请求结果更新Signal，同时维护loading状态：

@Component({
  // 组件元数据
})
export class EntityComponent {
  id = input<number>();
  loading = signal(false);
  entity = signal<Entity | null>(null);

  constructor(private entityService: EntityService) {
    effect(() => {
      const currentId = this.id();
      if (!currentId) {
        this.entity.set(null);
        return;
      }

      this.loading.set(true);
      this.entityService.findById(currentId).subscribe({
        next: (data) => this.entity.set(data),
        error: (err) => {
          // 可添加错误处理逻辑，比如重置状态
          this.loading.set(false);
        },
        complete: () => this.loading.set(false)
      });
    }, { allowSignalWrites: true });
  }
}

方案三：RxJS结合toObservable（推荐） #

利用toObservable将Input Signal转为Observable流，结合RxJS操作符处理请求和状态，这种方式更贴合RxJS的异步处理习惯，同时自动避免内存泄漏（需配合takeUntilDestroyed）：

@Component({
  // 组件元数据
})
export class EntityComponent {
  id = input<number>();
  loading = signal(false);
  entity$ = toObservable(this.id).pipe(
    filter(id => !!id),
    tap(() => this.loading.set(true)),
    switchMap(id => this.entityService.findById(id).pipe(
      finalize(() => this.loading.set(false))
    ))
  );

  constructor(
    private entityService: EntityService,
    private destroyRef: DestroyRef
  ) {
    // 自动在组件销毁时取消订阅
    this.entity$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
  }
}

核心说明 #

以上方案都不需要使用ngOnChanges：

• Effect仅监听目标Input Signal的变化，无需遍历所有输入变更
• toObservable底层依赖Effect，但Angular已封装好安全逻辑，且你的状态修改不会触发原Signal的循环更新

内容的提问来源于stack exchange，提问作者Ivo Udelsmann