0Pricing
Angular Academy · Lekcja

Tworzenie niestandardowych potoków

Twórz wielokrotnego użytku potoki transformacji.

Tworzenie niestandardowych potoków to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.

Po co tworzyć własne potoki?

Gdy wbudowane potoki nie wystarczają, można utworzyć własny potok, aby wydzielić wielokrotnie używaną logikę przekształcania w szablonach.

Dekorator @Pipe

Potok jest klasą ozdobioną dekoratorem @Pipe. Właściwość name to nazwa używana w szablonach.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

Implementowanie PipeTransform

Klasa potoku implementuje interfejs PipeTransform, który wymaga pojedynczej metody transform.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

Metoda transform

Pierwszy parametr metody transform to wartość przekazywana do potoku. Wszystko, co zwróci ta metoda, stanie się wynikiem wyświetlanym w widoku.

transform(value: string): string {
  return value.trim();
}

Używanie własnego potoku

Zaimportuj potok do samodzielnego komponentu, a następnie użyj jego nazwy w szablonie, tak jak nazwy wbudowanego potoku.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Przyjmowanie argumentów

Dodatkowe parametry występujące po value stają się argumentami potoku. Wywołujący przekazuje je po dwukropkach.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Domyślne wartości argumentów

Ustaw domyślne wartości argumentów, aby wywołujący mogli je pominąć. Dzięki temu potok pozostaje elastyczny.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Obsługa wartości null i undefined

Zawsze zabezpieczaj się przed brakiem danych wejściowych. Gdy wartość to null lub undefined, zwracaj sensowną wartość zastępczą.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Przykład potoku Truncate

Oto praktyczny potok, który skraca długi tekst i dodaje wielokropek.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Określanie typu zwracanej wartości

Określ typ zwracanej wartości, aby TypeScript i szablony zachowały bezpieczeństwo typów. Potok może zwracać dowolny typ, nie tylko ciągi znaków.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Rejestrowanie w module (NgModule)

Jeśli zamiast samodzielnych komponentów używa Pan(i) NgModules, zadeklaruj potok w sekcji declarations i w razie potrzeby go wyeksportuj.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat własnych potoków.

Podsumowanie

Zbudował(a) Pan(i) własny potok za pomocą @Pipe i PipeTransform, umożliwił(a) Pan(i) przekazywanie argumentów z wartościami domyślnymi, zabezpieczył(a) się przed null oraz zarejestrował(a) potok w samodzielnych komponentach lub NgModules.

Teraz pozna Pan(i) potoki czyste i nieczyste.

Często zadawane pytania

Czy lekcja „Tworzenie niestandardowych potoków” jest bezpłatna?

Tak — pełny tekst „Tworzenie niestandardowych potokó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 niestandardowych potoków”?

Twórz wielokrotnego użytku potoki transformacji. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Tworzenie niestandardowych potokó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. Używanie wbudowanych potoków
  2. Łączenie potoków i przekazywanie parametrów
  3. Tworzenie niestandardowych potoków
  4. Potoki czyste a nieczyste
← Powrót do Angular Academy