Bucaq 9-da Xüsusi Boru Yaratmağı nümayiş etdirən addım-addım nümunə

Bucaq borular, HTML-də elan edilə bilən görüntüləmə çevrilmələri yazma yolu.

Bucaqlı çərçivə, tətbiqinizdə istifadə edilə bilən bir sıra daxili boru təmin edir. Aşağıdakı [link] mövcud boruları vurğulayan API sənədlərinə istinaddır.

Hamımız bilirik ki, bütün veb tətbiqləri eyni dərəcədə yaradılmır və bəzi hallarda hazırda bucaqlı çərçivə ilə təmin olunmayan məlumatları göstərərkən özünəməxsus çevrilməyə ehtiyacınız var. Sən nə etməlisən?

Yaxşı bu problemi @NgModule bəyannaməsinə əlavə edərək ərizənizdə qeydiyyata alacağınız təkrar istifadə edilə bilən xüsusi boru yaratmaqla asanlıqla həll oluna bilər. Sonra ehtiyac duyduğunuz yerə istinad edə biləcəksiniz.

Bu dərslikdə aşağıdakı addımlarla sizi gəzəcəyəm:

  • Xüsusi bir boru yaradın
  • Xüsusi boru qeydiyyatı
  • Yeni yaradılan borudan istifadə edin

Bunu nümayiş etdirmək üçün aşağıdakı riyazi çevrilmədən istifadə edərək kilometrləri kilometrlərə çevirən bir boru yaradacağıq.

Bir mildə 1.609344 Kilometr var. Milyarı kilometrə çevirmək üçün mil dəyərini 1.609344 artırın.
Dönüşüm Formulu: d (mi) = d (km) / 1.609344
Misal: məsafə (mi) = 5 (km) / 1.6093 = 3.11 mil

1 - Xüsusi boru yaradın

İndi xüsusi borumuzun kodunu ehtiva edən typcript faylını yaradaq. Bucaqlı layihənizdə VScode-da aşağıdakı əmri yazın:> ng gp ./custom-pipes/kilometersToMiles

Bu əmr aşağıdakı fayl quruluşunda iki fayl yaradacaq: app> xüsusi boru.

  • kilometrdən-mil.pipe.spec.ts
  • kilometrə-mil.pipe.ts

Əlavə olaraq, bu komanda yeni yaradılan xüsusi boru proqramını app.module.ts sənədindəki @ NgModule bəyannamələrinə əlavə edəcək / əlavə edəcəkdir.

Xüsusi boru faylı yaradıldıqdan sonra dönüşüm əməliyyatını yerinə yetirmək üçün kodu tətbiq etməliyik. Kilometr-to-mile.pipe.ts faylını açın və aşağıdakı kodu əlavə edin:

çevir (dəyər: nömrə): nömrə {const kilometrInMile = 1.609344; if (! isNaN (value)) {qayıtmaq dəyəri / kilometriMMile; } geri qayıtmaq; }

Kilometrə-mil.pipe.ts indi belə görünməlidir:

Bu anda xüsusi boru yaratdıq və istifadəyə hazırdır.

2 - Xüsusi borudan necə istifadə etmək / istinad etmək

Layihənizdə bu xüsusi borudan istifadə etmək istədiyiniz bir komponent html faylı açın və aşağıdakı ifadəni əlavə edin:

{{5 | kilometr yolaMiles}}

Bu ifadədə biz borunu kilometrlərə çevirmək üçün 5 kilometrə bərabər olan dəyəri tətbiq etmək istədiyimizi söyləyirik.

Dəyişməni görmək üçün layihənizi tərtib və işə salmaq üçün aşağıdakı əmrdə VScode terminal tipinizdə:> ng service -o

Kod tərtib edildikdən sonra layihəniz bir brauzerdə başlayacaq və aşağıdakıları görməlisiniz.

Nə baş verəcəyini görəcəksiniz html faylında sabit kodlandığınız 5 dəyər dəyişdirilir / milə çevrilir.

3 - Xüsusi boru bir komponent.ts faylı içərisində necə istifadə ediləcək

Yeni yaradılan boru bir komponent.html faylında necə istifadə edəcəyimizi bildiyimiz üçün bir komponent.ts faylı içərisində düzgün istifadə üçün hansı addımlar var? Bu da mümkündürmü?

Cavab bəli. Yeni bir xüsusi boru və ya bir komponent içərisində açılı quraşdırılmış bir boru istifadə etmək üçün istədiyiniz boru konstruktora vurmalı və komponent dekoratorundakı serial təminatçılarına əlavə etməliyik.

Buna necə nail olmağın yolları burada. İstifadə etmək istədiyiniz komponent.ts faylını açın və @Komponent dekoratorunda xüsusi boru təmin edənlərin siyahısına əlavə edin.

Sonra, onsuz da birini ehtiva etməzsə, komponent.ts faylına bir konstruktor əlavə edək. Konstruktorun içərisinə parametr olaraq xüsusi boru əlavə edək:

Bu anda, açığımıza dedik ki, komponent.ts-lərdə kilometr ToMiles boru nümunəsi olacaq və biz konstruktor vasitəsilə vurduq.

Borunu kod şəklində istifadə etmək üçün bu anda etməlisiniz ki, aşağıdakı funksiyaya zəng edin:

bu.convertToMiles.transform (x);
Qeyd: x milə çevirməyə çalışdığınız kilometr məsafədir.

Aşağıda, yeni yaradılan xüsusi boru kəmərinə necə zəng edəcəyini nümayiş etdirən komponent.ts faylının içindəki bütün kodun ekran görüntüsü.

UI-də dönüşüm göstərmək üçün, komponent.html faylı açın və sadəcə ifadə olaraq çevrilmiş dəyəri olan sinif dəyişənini əlavə edin:

{{MəsafəInMiles}}

Kodunuzu tərtib edin və işə salın və dönüşümün uğurlu olduğunu görəcəksiniz.

3 - Nəticə

Bu təlimdə xüsusi bir boru yaratmağı və html və .ts kodumuzda istinad etməyi öyrəndik. Baxmayaraq ki, bu vert sadə bir nümunə idi, lakin daha mürəkkəb bir qurarkən bir boru yaratmaq üçün əsaslar dəyişmir.

Xüsusi bir boru necə yaratacağınızı bildiyiniz üçün, yarada biləcəyinizi görmək olduqca maraqlı olardı. Ümid edirəm bu dərs faydalı və faydalı oldu.