0Pricing
Angular Academy · Lekcja

Tworzenie i odczytywanie sygnałów

Deklaruj sygnały zapisywalne i odczytuj ich wartości.

Tworzenie i odczytywanie sygnałów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Tworzenie sygnału

Zapisywalny sygnał tworzysz za pomocą fabryki signal(), przekazując wartość początkową.

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

const c = signal(0); // initial value is 0

Wartość początkowa określa typ

TypeScript wywnioskuje typ sygnału na podstawie wartości początkowej. signal(0) ma typ WritableSignal<number>.

const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false);    // WritableSignal<boolean>

Odczytywanie sygnału

Wywołaj sygnał, aby odczytać jego bieżącą wartość. Zwraca to przechowywaną wartość i rejestruje zależność, jeśli wywołanie następuje w kontekście reaktywnym.

const c = signal(0);
const current = c(); // current === 0

Wielokrotny odczyt

Sygnał można odczytywać dowolną liczbę razy. Każde wywołanie zwraca najnowszą wartość z chwili wywołania.

const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10

Jawne określanie typu

Możesz jawnie określić typ, gdy wartość początkowa nie oddaje go w pełni, na przykład gdy wartością może być również null.

const user = signal<string | null>(null);
console.log(user()); // null

Sygnały przechowujące obiekty

Sygnał może przechowywać dowolną wartość, w tym obiekty i tablice.

const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0

Sygnały przechowujące tablice

Tablice działają tak samo. Odczyt zwraca bieżącą referencję do tablicy.

const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2

Sygnały jako pola klas

W komponentach i usługach deklaruj sygnały jako pola. Są one inicjalizowane raz, podczas tworzenia instancji.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
}

Odczytywanie w klasie komponentu

Sygnał można odczytać w dowolnym miejscu klasy, na przykład wewnątrz metody, wywołując go.

export class CounterStore {
  count = signal(0);
  isZero(): boolean {
    return this.count() === 0;
  }
}

Dostęp tylko do odczytu

Jeśli chcesz udostępnić sygnał bez pozwalania odbiorcom na jego modyfikowanie, możesz udostępnić go za pomocą metody asReadonly().

const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not available

Konwencje nazewnictwa

Popularna konwencja polega na nazywaniu sygnału zgodnie z przechowywaną przez niego wartością (na przykład count, items), ponieważ odczyt wygląda jak zwykły accessor: count().

Szybki test: tworzenie sygnałów

Sprawdź swoją znajomość tworzenia i odczytywania sygnałów.

Powtórzenie: tworzenie i odczytywanie

Wiesz już, jak utworzyć zapisywalny sygnał za pomocą signal(initialValue), jak TypeScript wywnioskuje jego typ oraz jak odczytać sygnał, wywołując go. Poznałeś również asReadonly(), które umożliwia udostępnianie dostępu tylko do odczytu. Następny temat: aktualizowanie wartości sygnałów.

Często zadawane pytania

Czy lekcja „Tworzenie i odczytywanie sygnałów” jest bezpłatna?

Tak — pełny tekst „Tworzenie i odczytywanie sygnałów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie i odczytywanie sygnałów”?

Deklaruj sygnały zapisywalne i odczytuj ich wartości. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Tworzenie i odczytywanie sygnałów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Czym są sygnały
  2. Tworzenie i odczytywanie sygnałów
  3. Aktualizowanie sygnałów za pomocą set i update
  4. Sygnały w szablonach
← Powrót do Angular Academy