如何同步Angular组件输入信号与全局服务中的可写信号以共享资源请求

我来帮你搞定这个组件输入和服务信号同步的问题～ 按照你的需求，我们可以利用Angular的effect来自动监听组件输入信号的变化，然后同步到全局服务的可写信号里，这样服务里的资源就能自动根据最新的ID请求数据了。

核心思路 #

组件的InputSignal是响应式只读信号，我们可以用effect来追踪它的变化，一旦输入的ID更新，就立刻同步到服务的serviceIdSignal中。Angular的effect会自动和组件生命周期绑定，组件销毁时会自动清理，不用担心内存泄漏。

修改后的代码实现 #

1. 子组件（Child）修改

我们在子组件中添加effect来同步输入信号和服务信号：

@Component({
  selector: 'app-child',
  template: `
        <div></div>
      `,
})
export class Child {
  someService = inject(SomeService);
  componentIdSignal: InputSignal<number> = input.required({
    alias: 'id',
  });

  constructor() {
    // 监听输入ID的变化，自动同步到服务的信号中
    effect(() => {
      const currentId = this.componentIdSignal();
      this.someService.serviceIdSignal.set(currentId);
    });
  }
}

2. 服务代码无需修改

你的服务代码本身已经正确依赖了serviceIdSignal，只要这个信号的值更新，rxResource和resource就会自动触发新的请求，所以原服务代码保持不变即可：

@Injectable({
  providedIn: 'root',
})
export class SomeService {
  http = inject(HttpClient);
  serviceIdSignal: WritableSignal<number> = signal(0); // 现在会被组件输入同步

  rxResource = rxResource({
    request: () => this.serviceIdSignal(),
    loader: ({ request: id }) => {
      return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);
    },
  });

  resource = resource({
    request: () => this.serviceIdSignal(),
    loader: ({ request: id, abortSignal }) => {
      return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
        signal: abortSignal,
      }).then((r) => r.json());
    },
  });
}

3. 根组件（App）保持不变

根组件的代码不需要修改，当你更新id信号时，子组件的输入会跟着变化，进而触发服务信号更新和资源重新请求。

关键说明 #

• 为什么用effect？：effect是Angular专门用来处理响应式依赖变化的副作用工具，它会自动追踪componentIdSignal()的变化，无需手动订阅/取消订阅，组件销毁时会自动清理，非常适合这种同步场景。
• 全局服务的注意点：因为你的服务是应用级单例，如果你在页面上同时存在多个app-child组件，它们的输入ID会互相覆盖服务的信号值（最后一个更新的ID会生效）。如果需要多组件隔离资源请求，你可以把服务改为组件级别的提供者（在组件的providers数组中添加SomeService），这样每个组件都会有自己的服务实例。

备注：内容来源于stack exchange，提问作者Naren Murali