Angular 17：子组件B的Signal数据如何同步更新到子组件C？

问题场景 #

在Angular 17中测试Signal功能，需要将子组件B的Signal值共享给子组件C。当前实现为：组件B导出Signal对象item，接口请求完成后更新其值；组件C导入该Signal并绑定到模板。首次加载时模板显示正常，但Signal更新时控制台能看到新数据，模板却不刷新。

现有代码 #

componentB.component.ts

export const item = signal<any>('');

getFileInformation() {
  this.loading = true;
  const functions = getFunctions(getApp());
  connectFunctionsEmulator(functions, 'localhost', 5001);
  const getInfo = httpsCallable(functions, 'getInformation')
  getInfo(this.url.value)
  .then( (result: any) => {
    item.set(result.data);
    console.log(item());
  })
}

componentC.component.ts

import { item } from '../componentB/componentB.component';

item_ = item;

componentC.component.html

<p class="">{{item_().data.title}}</p>

问题原因 #

直接跨组件导入Signal的方式绕过了Angular的组件通信机制。Angular的变更检测仅会关联组件上下文内的依赖，跨组件直接引用的Signal无法触发组件C的视图更新流程。

解决方案 #

方案一：通过父组件中转传递Signal（推荐，符合组件层级设计）

利用父子组件的输入输出机制，让父组件作为中间层传递Signal，确保Angular能正确追踪变化。

1. 修改组件B：将Signal改为组件公共实例属性（不再导出）

@Component({
  selector: 'app-component-b',
  // 其他组件元数据
})
export class ComponentBComponent {
  item = signal<any>(''); // 改为组件实例属性

  getFileInformation() {
    this.loading = true;
    const functions = getFunctions(getApp());
    connectFunctionsEmulator(functions, 'localhost', 5001);
    const getInfo = httpsCallable(functions, 'getInformation')
    getInfo(this.url.value)
    .then( (result: any) => {
      this.item.set(result.data); // 更新组件实例的Signal
      console.log(this.item());
    })
  }
}

2. 父组件A模板：通过模板引用获取组件B实例，将Signal传递给组件C

<app-component-b #componentBRef></app-component-b>
<app-component-c [item]="componentBRef.item"></app-component-c>

3. 组件C接收Signal：通过@Input接收父组件传递的Signal

@Component({
  selector: 'app-component-c',
  // 其他组件元数据
})
export class ComponentCComponent {
  @Input() item!: Signal<any>;
}

4. 组件C模板：保持原绑定逻辑不变

<p>{{item().data.title}}</p>

方案二：使用共享服务管理Signal（适合多组件共享状态）

创建全局服务作为状态容器，统一管理Signal，所有组件通过服务访问和更新状态。

1. 创建共享数据服务

import { Injectable, signal, Signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataShareService {
  private _item = signal<any>('');
  // 对外暴露只读Signal，避免外部直接修改状态
  item: Signal<any> = this._item.asReadonly();

  updateItem(data: any): void {
    this._item.set(data);
  }
}

2. 组件B注入服务更新状态

@Component({
  selector: 'app-component-b',
  // 其他组件元数据
})
export class ComponentBComponent {
  constructor(private dataShareService: DataShareService) {}

  getFileInformation() {
    this.loading = true;
    const functions = getFunctions(getApp());
    connectFunctionsEmulator(functions, 'localhost', 5001);
    const getInfo = httpsCallable(functions, 'getInformation')
    getInfo(this.url.value)
    .then( (result: any) => {
      this.dataShareService.updateItem(result.data); // 通过服务更新Signal
      console.log(this.dataShareService.item());
    })
  }
}

3. 组件C注入服务获取Signal

@Component({
  selector: 'app-component-c',
  // 其他组件元数据
})
export class ComponentCComponent {
  item = this.dataShareService.item;

  constructor(private dataShareService: DataShareService) {}
}

4. 组件C模板：保持原绑定逻辑不变

<p>{{item().data.title}}</p>

内容的提问来源于stack exchange，提问作者Paco Zevallos