Angular：服务Signal更新时触发组件方法的实现方案求助

方法一：用effect监听信号变更 #

Angular的effect会自动追踪依赖的信号，当searchTextSignal更新时自动执行过滤逻辑。只需在组件中导入effect并创建监听逻辑：

修改后的组件代码：

import { Component, signal, effect} from '@angular/core';
import { Factura } from 'src/app/interfaces/factura';
import { FacturaService } from 'src/app/services/factura.service';
import { SearchBarService } from 'src/app/services/search-bar.service';

@Component({
  selector: 'vista-facturas',
  templateUrl: './vista-facturas.component.html',
  styleUrls: ['./vista-facturas.component.css']
})
export class VistaFacturasComponent {

    facturasArray: Factura[] = [];
    filteredFacturasArray = signal<Factura[]>([]);

    constructor(private facturaService: FacturaService, public searchBarService: SearchBarService) {
        // 创建effect，监听searchTextSignal变化
        effect(() => {
            this.filterFacturas();
        });
    }

    getFacturas(): void {
        this.facturaService.getFacturas().subscribe(facturasReturned => {
            this.facturasArray = facturasReturned;
            this.filterFacturas(); // 初始加载数据后执行一次过滤
        });
    }

    filterFacturas(): void{
        const text = this.searchBarService.searchTextSignal().trim().toLowerCase();

        if (!text) {
            this.filteredFacturasArray.set([...this.facturasArray]);
            return; // 避免后续过滤逻辑执行
        }
        
        this.filteredFacturasArray.set(
            this.facturasArray.filter(factura => 
                factura?.numero.toString().toLowerCase().includes(text)
            )
        );
    }

    ngOnInit(): void {
        this.getFacturas();
    }
}

注意：

• 初始加载数据后必须手动调用filterFacturas，因为effect只在信号变更时触发，初始数据加载不属于信号变更。
• 原filterFacturas缺少return，会导致空文本时仍执行过滤，需补上。
• 增加trim()和大小写转换，提升搜索的用户体验。

方法二：改用computed信号（更推荐） #

既然filteredFacturasArray是基于facturasArray和searchTextSignal的衍生值，用computed信号更符合Angular响应式设计，无需手动触发过滤：

修改后的组件代码：

import { Component, signal, computed} from '@angular/core';
import { Factura } from 'src/app/interfaces/factura';
import { FacturaService } from 'src/app/services/factura.service';
import { SearchBarService } from 'src/app/services/search-bar.service';

@Component({
  selector: 'vista-facturas',
  templateUrl: './vista-facturas.component.html',
  styleUrls: ['./vista-facturas.component.css']
})
export class VistaFacturasComponent {

    facturasArray = signal<Factura[]>([]); // 改为signal，让computed能追踪
    filteredFacturasArray = computed(() => {
        const text = this.searchBarService.searchTextSignal().trim().toLowerCase();
        const facturas = this.facturasArray();
        
        if (!text) return [...facturas];
        
        return facturas.filter(factura => 
            factura?.numero.toString().toLowerCase().includes(text)
        );
    });

    constructor(private facturaService: FacturaService, public searchBarService: SearchBarService) { }

    getFacturas(): void {
        this.facturaService.getFacturas().subscribe(facturasReturned => {
            this.facturasArray.set(facturasReturned);
        });
    }

    ngOnInit(): void {
        this.getFacturas();
    }
}

优势：

• 无需手动管理过滤触发，computed会自动追踪依赖的信号变化，实时更新结果。
• 代码更简洁，减少冗余逻辑。
• 模板无需修改，依然使用filteredFacturasArray()。

额外修复点 #

原代码中getFacturas里在subscribe外直接设置filteredFacturasArray，但subscribe是异步的，此时facturasArray还未更新，会导致初始过滤结果为空，两种方法都已修复此问题。

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