Un exemple pas a pas demostrant com crear un tub personalitzat a Angular 9

Tubs angulars, una manera d’escriure transformacions de valor de visualització que es poden declarar en HTML.

El framework angular proporciona una sèrie de canonades integrades que es poden aprofitar per a la vostra aplicació. El següent [enllaç] és una referència a la documentació de l'API que ressalta diversos tubs disponibles.

Tots sabem que no totes les aplicacions web es creen iguals i, en alguns casos, es troba que necessita una transformació personalitzada en mostrar informació que actualment no proporciona el marc angular. Què deuries fer?

Doncs bé, aquest problema es pot solucionar fàcilment creant un tub personalitzat reutilitzable que registreu a la sol·licitud afegint-lo a la declaració @NgModule. Aleshores, podreu referir-lo allà on calgui.

En aquest tutorial us detallaré els següents passos:

  • Creeu un tub personalitzat
  • Registre el tub personalitzat
  • Utilitzeu la canonada de nova creació

Per demostrar-ho, crearem una canonada que transformarà / convertirà milles en quilòmetres mitjançant la següent conversió matemàtica:

Hi ha 1.609344 quilòmetres en una milla. Per convertir les milles en quilòmetres, multipliqueu el valor de la milla per 1.609344.
Fórmula de conversió: d (mi) = d (km) / 1.609344
Exemple: distància (mi) = 5 (km) / 1,6093 = 3,11 mi

1: crea un tub personalitzat

Ara creem el fitxer de tipus tipografia que contindrà el codi per al nostre tub personalitzat. Al vostre projecte angular, escriviu la comanda següent a VScode:> ng gp ./custom-pipes/kilometersToMiles

Aquesta ordre generarà dos fitxers en la següent estructura de fitxers: app> custom-pipe.

  • quilòmetres a quilòmetres.pipe.spec.ts
  • quilòmetres a quilòmetres.pipe.ts

A més, aquesta ordre registrarà / afegirà el tub personalitzat de nova creació a les declaracions @NgModule al fitxer app.module.ts.

Ara que s’ha creat el fitxer de canalització personalitzada, hem d’implementar el codi per realitzar l’operació de conversió. Obre el fitxer quilòmetres-a-mili.pipe.ts i afegeix el codi següent:

transformar (valor: nombre): nombre {const quilòmetresInMil = 1.609344; if (! isNaN (valor)) {valor de retorn / quilòmetresInMile; } retorn nul; }

Els quilòmetres a quilòmetres.pipe.ts ara haurien de ser així:

En aquest moment hem creat el tub personalitzat i ja està a punt per utilitzar-lo.

2 - Com utilitzar / referir el tub personalitzat

Al projecte, obriu un fitxer html de component on vulgueu fer servir aquest tub personalitzat i afegir la següent expressió:

{{5 | quilòmetresToMiles}}

En aquesta expressió, expliquem angularment que desitgem aplicar la canonada sobre el valor 5 que es troba en quilòmetres per convertir-lo en milles.

Per veure el canvi, al tipus de terminal VScode de l'ordre següent per compilar i executar el vostre projecte:> ng serveix -o

Una vegada compilat el codi, el vostre projecte es llançarà en un navegador i haureu de veure el següent:

El que veuràs passar és el valor 5 que teniu codificat en el fitxer html que es transforma / converteixi en milles.

3 - Com s'utilitza el tub personalitzat dins d'un fitxer component.ts

Ara que sabem com utilitzar el pipí de nova creació en un fitxer component.html, quins són els passos per utilitzar-lo correctament dins d’un fitxer component.ts? Fins i tot això és possible?

La resposta és que sí. Per utilitzar la canonada recentment personalitzada o una canalització angular integrada dins d’un component, hem d’injectar la canonada desitjada al constructor i afegir-la també als proveïdors de matrius del decorador de components.

A continuació, es mostra com aconseguir-ho. Obriu el fitxer component.ts on voleu fer-lo servir i al decorador @Component afegiu el tub personalitzat a la llista de proveïdors.

A continuació, afegim un constructor al fitxer component.ts si encara no en conté un. Dins el constructor, afegim el tub personalitzat com a paràmetre:

Arribats a aquest punt, hem dit a angular que el nostre component.ts tindrà una instància de la canonada quilòmetres i l’hem injectat a través del constructor.

Per poder fer servir la canonada en codi, només heu de fer una trucada a la funció següent:

this.convertToMiles.transform (x);
Nota: x és la distància en quilòmetre que intenteu convertir en milles.

A continuació, es mostra una pantalla de tot el codi que hi ha dins del fitxer component.ts que demostra com es pot trucar al pipí personalitzat recentment creat.

Per visualitzar la conversió a la interfície d'interès, obriu el fitxer component.html i afegiu simplement la variable de classe que conté el valor convertit com a expressió:

{{distanceInMiles}}

Compileu i executeu el vostre codi i notareu que la conversió ha estat correcta.

3 - Conclusió

En aquest tutorial vam aprendre a crear un tub personalitzat i fer-lo referència al nostre codi html i .ts. Tot i que, aquest era un exemple senzill de vert, però els fonaments per a crear una canonada no canvien en crear-ne un de més complex.

Ara que ja sabeu crear un tub personalitzat, seria molt interessant veure què podeu crear. Espero que aquest tutorial us sigui d’utilitat i benefici.