angular

Czy wiesz, do czego służy untracked w Angular?

31 lipca 2025

W bibliotekach opartych na reaktywnych sygnałach, takich jak Angular Signals, każda zmiana wartości sygnału używanego w funkcjach computed() lub effect() powoduje automatyczną rekalkulację lub ponowne wykonanie efektu. Dzięki temu aplikacja utrzymuje spójny stan i dynamicznie reaguje na zmiany danych. W niektórych sytuacjach jednak warto pobrać wartość sygnału bez uruchamiania reakcji. Można to osiągnąć za pomocą funkcji untracked(), która pozwala na odczyt wartości sygnału z pominięciem mechanizmu śledzenia zależności.

const signalA = signal(0);
const signalB = signal(1);
 
effect(() => {
  console.log(signalA(), untracked(() => signalB()));
})

Powyższy kod wykona się ponownie tylko w przypadku aktualizacji wartości sygnału A.

W poniższym przykładzie untracked został użyty w komponencie karuzeli kategorii:

@Component({
  // (...)
  template: `
    <ul>
      @for (category of categories(); track $index; let i = $index) {
        <li [attr.row-id]="i" #category>
          
        </li>
      }
    </ul>
  `,
})
export class Categories {
  // lista kategorii
  categories: WritableSignal<string[]> = signal([
    'wszystkie',
    'ankieta',
    'bezpieczenstwo',
    'inne',
    'marketing',
    'monitoring',
    'oferta',
    'oplaty',
    'oprocentowanie',
    'regulaminy',
    'reklamacje',
  ]);
 
  // wybrana kategoria
  selectedRow: WritableSignal<number> = signal(0);
 
}

Na karuzeli wyświetlają się poziomo kategorie, które są scrollowalne.

Dodanie scrollowania do wybranej kategorii, można dodać w ramach effect():

// (...)
export class Categories {
  // (...)
  viewChildrenCategories: Signal<ReadonlyArray<ElementRef>> = 
    viewChildren<ElementRef>('category');
  
  constructor() {
    effect(() => {
      const selectedRow = this.selectedRow();
      const selectedElement = untracked(() =>
        this.viewChildrenCategories().find(
            (element) =>
            element.nativeElement.getAttribute('row-id') == selectedRow
            )
        );
      selectedElement?.nativeElement.scrollIntoView({
        behavior: 'smooth',
        inline: 'center',
      });
    }); 
 }
 // (...)
}