如何在NGXS状态管理中使用Angular Signals改造选择器订阅？

我正在使用NGXS状态管理框架，现有如下状态与选择器代码：

export interface ITodoCountState {
  count: string;
}

@State<ITodoCountState>({
  name: 'todosCount',
  defaults: {
    count: '',
  },
})
@Injectable()
export class TodoCountState {
  @Selector([TodoCountState])
  static count(state: ITodoCountState) {
    return state.count;
  }

  @Action(SetTodosCount)
  GetTodosCount(ctx: StateContext<ITodoCountState>, action: SetTodosCount) {
    ctx.patchState({
      count: action.count,
    });
  }
}

组件中原本通过以下方式获取状态并在HTML模板中使用：

@Select(TodoCountState.count) todosCount$!: Observable<string>;

请问如何将todosCount$改为使用Angular Signals实现？

NGXS从v18版本开始原生支持Angular Signals，你可以直接用框架提供的selectSignal工具函数替换原有@Select装饰器，步骤如下：

1. 导入工具函数：从@ngxs/store中导入selectSignal
2. 替换状态获取方式：在组件类中定义Signal类型的属性，通过selectSignal传入目标选择器

修改后的组件代码：

import { selectSignal } from '@ngxs/store';
import { TodoCountState } from './path-to-your-state';

// 组件类内部
todosCount = selectSignal(TodoCountState.count);

3. 模板使用调整：无需再使用async管道，直接调用Signal函数获取值：

<!-- 原写法 -->
<p>{{ todosCount$ | async }}</p>

<!-- 修改后写法 -->
<p>{{ todosCount() }}</p>

如果需要在组件逻辑中访问当前状态值，直接调用todosCount()即可获取最新的状态数据。

内容的提问来源于stack exchange，提问作者Alireza Ahmadi