typescript - Cum să apelezi o metodă a unui component atunci când un Signal se schimbă în Angular 17?


Avem un component care se abonează la semnale de la un Serviciu:

export class PaginationComponent {
  private readonly pageSize = this.listService.pageSize.asReadonly();

  private readonly totalCount = this.listService.totalCount.asReadonly();

  readonly pageCount = computed(() => Math.ceil(this.totalCount() / this.pageSize() || 1);

  readonly pages = signal<number[]>([]);

  constructor(
    private readonly paginationService: PaginationService,
  ) { }

  private calculatePages(): void {
    this.pages.set([]);
  }
}

Metoda calculatePages este folosită pentru a umple this.pages cu paginile care sunt afișate în paginare.

Cum pot rula această metodă când this.pageCount se schimbă?

Răspuns #1

așa ar trebui să faci asta -

semnal de apel de la un component

 private yourService = inject(YourService);
    localVariable: string //example
    constructor(){
     effect(()=> this.localVariable = this.yourService.yourSignal()
    }

setează semnalul

    yourService class

    public yourSignal = signal<string>('' as any);
    setYourSignalMethod(yourUpdateVariable:string){
      this.yourSignal.update(()=>yourUpdateVariable);
    }

https://angular.io/guide/signals

Răspunsul #2

Deoarece readonly pages=signal<number[]>([]) este un semnal, îl poți seta acolo dacă this.pageCount() se schimbă.

Ceva de genul:

  readonly pages = computed(() => this.pageCount());

De asemenea, poți face:

readonly pageCount = computed(() => {
const pageCount = Math.ceil(this.totalCount() / this.pageSize() || 1;
this.calculatePages();
return pageCount;
});