consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
angular

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

author Dorian Mejer
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',
      });
    }); 
 }
 // (...)
}

Scroll zostanie wykonany jedynie w przypadku gdy selectedRow zostanie zaktualizowany. Aktualizacja kategorii nie spowoduje przeskrollowania.

Przydatne linki

  • Playground
  • Dokumentacja
Najnowsze wpisy

  • Czy wiesz, do czego służy untracked w Angular?
  • Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?
  • Dostępność w PDF - dokumenty bez barier
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
angular

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

author
Dorian Mejer 31 lip 2025
post-image
wcag

Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?

author
Wojciech Stolarski 19 maj 2025
post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się