如何用computed signal替代带参数getter并实现无Zone.js全响应式

核心思路 #

因为computed本身不支持传参，我们可以通过将列表与选中状态结合，生成一个计算后的映射表来替代原有的getSelectedState方法，同时确保整个实现完全基于Signal，移除Zone.js后仍能正常工作。

具体实现步骤 #

1. 创建计算态的选中状态映射
   用computed结合list和selectedOption两个Signal，生成一个记录每个选项选中状态的Map：

   /** PROPS */
   selectedOption = signal<string | null>(null);
   list = signal<string[]>([]); // 若list是输入属性，可转为input signal：list = input.required<string[]>()
   
   // 计算每个选项的选中状态映射
   selectedStates = computed(() => {
     const currentSelected = this.selectedOption();
     return this.list().reduce((stateMap, option) => {
       stateMap.set(
         option,
         currentSelected === null ? undefined : option === currentSelected
       );
       return stateMap;
     }, new Map<string, boolean | undefined>());
   });
   

2. 模板中直接引用映射表
   在@for循环里，通过映射表直接获取对应选项的选中状态：

   @for (option of list(); track option) {
     <monkey-chip
       [variant]="'frequency-sel'"
       [text]="option"
       [selected]="selectedStates().get(option)"
       (click)="onSelect(option)"
     />
   }
   

3. 更新选中状态的方法
   onSelect直接更新selectedOption Signal即可，无需依赖Zone.js：

   onSelect(option: string): void {
     // 可选逻辑：点击已选中选项时清空选中状态
     this.selectedOption.set(this.selectedOption() === option ? null : option);
   }
   

4. 启用无Zone.js的响应式支持
   要移除Zone.js仍正常运行，需要：

   • 确保组件使用Signal-based变更检测，在组件元数据中设置：

     @Component({
       // ...其他配置
       changeDetection: ChangeDetectionStrategy.OnPush
     })
     

   • 若使用Angular 17+，可在应用配置中启用无Zone.js模式：

     bootstrapApplication(AppComponent, {
       providers: [provideExperimentalZonelessChangeDetection()]
     });
     

优势说明 #

• 完全基于Signal的响应式流，所有状态变化自动触发视图更新，无需依赖Zone.js的脏检查
• 计算态selectedStates仅在list或selectedOption变化时重新计算，性能更优
• 模板中避免了频繁调用方法，减少不必要的重复执行

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