Angular 17组件重构：Signals使用疑问与实现困惑

1. 重新发起请求更新toSignal生成的信号数组 #

用toSignal转换请求结果时，核心是让关联的Observable能触发新值。可以通过一个触发信号结合switchMap实现请求重发：

实现步骤： #

• 定义一个用于触发请求刷新的信号：

import { signal, toSignal } from '@angular/core';
import { switchMap, catchError, EMPTY } from 'rxjs';

// 触发信号，每次更新值就会触发请求重发
private refreshTrigger = signal(0);

• 基于触发信号创建商品和品牌的信号，每次trigger变化时重新调用请求API：

products = toSignal(
  this.refreshTrigger.pipe(
    switchMap(() => this.productService.getProducts()),
    catchError(err => {
      console.error('获取商品失败:', err);
      return EMPTY;
    })
  ),
  { initialValue: [] } // 设置初始空数组
);

brands = toSignal(
  this.refreshTrigger.pipe(
    switchMap(() => this.productService.getBrands()),
    catchError(err => {
      console.error('获取品牌失败:', err);
      return EMPTY;
    })
  ),
  { initialValue: [] }
);

• 需要重新发起请求时，只需更新触发信号的值：

// 比如在刷新按钮点击事件中调用
refreshData() {
  this.refreshTrigger.update(v => v + 1);
}

2. 不使用effect()将信号数据同步到Material DataSource #

可以用Angular提供的watch()方法（专门用于响应信号变化执行副作用），或者通过computed结合模板绑定来实现：

方案一：用watch()更新现有DataSource实例 #

适合需要复用同一个MatTableDataSource实例的场景：

import { watch } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

dataSource = new MatTableDataSource<Product>([]);

constructor(private productService: ProductService) {
  // 监听products信号变化，同步到dataSource
  watch(() => this.products(), () => {
    this.dataSource.data = this.products();
    // 如果需要排序、过滤同步，也可以在这里处理
    this.dataSource.sort = this.sort; // 假设已注入MatSort
  });

  // 同理处理brands信号
  watch(() => this.brands(), () => {
    // 比如更新品牌筛选下拉框选项等
  });
}

方案二：用computed创建DataSource信号（适合简单场景） #

如果不需要复用DataSource实例，可以直接用computed生成新的DataSource，模板会自动更新：

import { computed } from '@angular/core';

dataSource = computed(() => new MatTableDataSource(this.products()));

模板中直接绑定：

<table mat-table [dataSource]="dataSource()">
  <!-- 表格列定义 -->
</table>

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