Použijte vlastní kanály k formátování dat, jak potřebujete.
Potrubí je výkonná funkce Angular, která vám umožňuje transformovat a formátovat data ve vaší aplikaci. Poskytují pohodlný způsob, jak manipulovat s daty před jejich zobrazením uživateli, díky čemuž je vaše aplikace dynamičtější a uživatelsky přívětivější.
Angular nabízí řadu vestavěných potrubí, jako jsou DatePipe, CurrencyPipe a UpperCasePipe. Spolu s vestavěnými potrubími, které Angular nabízí, můžete vytvářet vlastní potrubí pro transformaci dat jakýmkoli způsobem, který potřebujete.
Nastavte si svůj úhlový projekt
Před vytvořením vlastních potrubí se ujistěte, že jste rozumí potrubí v Angular. Abyste mohli nastavit projekt Angular, ujistěte se, že máte na svém počítači nainstalováno rozhraní Angular CLI. Můžete jej nainstalovat pomocí npm (Node Package Manager).
Nainstalujte Angular CLI spuštěním následujícího příkazu:
npm install -g @angular/cli
Dále vytvořte nový projekt Angular spuštěním tohoto příkazu:
ng new my-app
Po vytvoření projektu přejděte do adresáře projektu a otevřete aplikaci ve svém IDE.
Vytvořte vlastní potrubí
Nyní, když jste nastavili aplikaci Angular, další věcí, kterou musíte udělat, je vytvořit vlastní potrubí. Chcete-li vytvořit vlastní potrubí, musíte vygenerovat nové pomocí Angular CLI.
Chcete-li to provést, spusťte následující příkaz v adresáři aplikace na terminálu:
ng generate pipe customPipe
Tento příkaz vygeneruje dva soubory pojmenované custom-pipe.pipe.ts a custom-pipe.pipe.spec.ts v src/app adresář. Soubor custom-pipe.pipe.ts je soubor TypeScript který obsahuje kód pro definování vašeho vlastního potrubí. Ke spuštění testů na vlastní rouře použijete custom-pipe.pipe.spec.ts.
V custom-pipe.pipe.ts soubor, najdete tyto řádky kódu:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
}
}
Tento blok kódu importuje soubor Trubka dekoratér a PipeTransform rozhraní z @angular/core modul. Dekorátor potrubí definuje metadata potrubí a třída potrubí implementuje rozhraní PipeTransform.
V CustomPipePipe třídy, implementujete PipeTransform rozhraní, které vyžaduje implementaci přeměnit metoda. Transformační metoda je zodpovědná za transformaci vstupní hodnoty.
The přeměnit metoda má dva parametry, hodnota a argumenty. Parametr value představuje transformační hodnotu potrubí a parametr args představuje volitelné parametry, které můžete chtít přidat.
Nyní jste pochopili základní principy custom-pipe.pipe.ts soubor, nahraďte výše uvedený blok kódu tímto kódem:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
V tomto bloku kódu je přeměnit metoda bere hodnota parametr typu tětiva jako argument a vrátí pole řetězců. Metoda transform rozdělí vstupní řetězec na pole jednotlivých znaků pomocí rozdělit metoda a vrátí výsledné pole.
Integrace vlastního potrubí do vaší aplikace
Úspěšně jste vytvořili vlastní potrubí a nyní je můžete použít ve svých Angular šablonách. Před použitím vlastního kanálu ve své aplikaci jej importujte a deklarujte ve svém app.module.ts soubor. Chcete-li to provést, nahraďte kód v app.module.ts následujícím:
import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
declarations: [
AppComponent,
CustomPipePipe
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
exportclass AppModule { }
Nyní můžete trubku použít ve svých šablonách. Otevři app.component.html soubor a přidejte následující kód:
<p>{{ 'apple' | CustomPipe }}p>
V tomto příkladu použijete CustomPipe potrubí pro přeměnu řetězce 'jablko' do pole řetězců.
Otestujte si vlastní potrubí
Chcete-li vidět svůj vlastní kanál v akci, spusťte vývojový server Angular. Můžete to provést spuštěním následujícího příkazu terminálu:
ng serve
Otevřete prohlížeč a přejděte na http://localhost: 4200. Na stránce byste měli vidět transformovaný řetězec:
Posuňte své úhlové aplikace na další úroveň
Potrubí je výkonný nástroj Angular, který vám umožňuje transformovat a formátovat data ve vaší aplikaci. Můžete si vytvořit vlastní potrubí, které bude vyhovovat vašim specifickým potřebám, a vaše aplikace Angular bude dynamičtější.
Dalším způsobem, jak posunout své aplikace Angular na další úroveň, je porozumět směrování v Angular. Směrování je klíčový koncept, který vám umožňuje řídit, jak uživatelé procházejí vaší aplikací. Pochopením směrování můžete vytvářet jednostránkové aplikace, které jsou uživatelsky přívětivější a efektivnější.