Пакрокавы прыклад, які дэманструе, як стварыць нестандартную трубу ў куце 9

Вуглавыя трубы - спосаб напісання пераўтварэнняў значэння, якія могуць быць аб'яўлены ў HTML.

Кутняя аснова забяспечвае масіў убудаваных труб, якія можна выкарыстоўваць у вашым дадатку. Наступная спасылка - спасылка на дакументацыю API, у якой адзначаюцца розныя даступныя трубы.

Мы ўсе ведаем, што не ўсе вэб-прыкладанні створаны роўнымі, і ў некаторых выпадках вам патрэбна карыстацкая трансфармацыя пры адлюстраванні інфармацыі, якая ў дадзены момант не прадугледжана вуглавой рамкай. Што рабіць?

Ну і гэтую праблему можна лёгка вырашыць, стварыўшы карыстацкую трубу для шматразовага выкарыстання, якую вы зарэгіструеце ў сваім дадатку, дадаўшы яе ў дэкларацыю @NgModule. Тады вы зможаце накіраваць яго там, дзе гэта неабходна.

У гэтым уроку я правяду вас праз наступныя дзеянні:

  • Стварыце ўласную трубу
  • Рэгіструйце нестандартную трубу
  • Выкарыстоўвайце нядаўна створаную трубу

Каб прадэманстраваць гэта, мы створым трубу, якая будзе пераўтвараць / пераўтвараць мілі ў кіламетры, выкарыстоўваючы наступнае матэматычнае пераўтварэнне:

Далей за 1.609344 кіламетраў. Каб пераўтварыць мілі ў кіламетры, памножце значэнне мілі на 1.609344.
Формула пераўтварэння: d (мілі) = d (км) / 1.609344
Прыклад: адлегласць (мілі) = 5 (км) / 1,6093 = 3,11 мілі

1 - Стварыце ўласную трубу

Зараз давайце створым файл машынапісу, які будзе ўтрымліваць код для нашай карыстацкай трубы. У куце праекта ўвядзіце наступную каманду ў VScode:> ng gp ./custom-pipes/kilometersToMiles

Гэтая каманда генеруе два файлы ў наступнай структуры файла: app> custom-pipe.

  • км-да-міль.pipe.spec.ts
  • кіламетраў на міль.pipe.ts

Акрамя таго, гэтая каманда будзе рэгістраваць / дадаваць нядаўна створаную карыстацкую трубку ў дэкларацыі @NgModule ў файл app.module.ts.

Цяпер, калі быў створаны нестандартны файл труб, нам трэба рэалізаваць код для выканання аперацыі пераўтварэння. Адкрыйце файл км-да-mile.pipe.ts і дадайце наступны код:

пераўтварэнне (значэнне: колькасць): лік {const kilometInMile = 1,6609344; калі (! isNaN (value)) {return value / kmInMile; } return null; }

Кілямэтры да mil.pipe.ts цяпер павінны выглядаць так:

У гэты момант мы стварылі спецыяльную трубу і яна гатовая да выкарыстання.

2 - Як выкарыстоўваць / спасылацца на нестандартную трубу

У сваім праекце адкрыйце кампанентны файл html, дзе вы хочаце выкарыстоўваць гэтую карыстацкую трубу і дадайце наступны выраз:

{{5 | кіламетраўМалы}}

У гэтым выразе мы кажам вугла, што мы хочам ужыць трубу на значэнні 5, якое знаходзіцца ў кіламетрах, каб пераўтварыць яе ў мілі.

Каб убачыць змены, у тыпе тэрмінала VScode увядзіце наступную каманду для кампіляцыі і запуску праекта:> ng serve -o

Пасля кампіляцыі кода ваш праект запусціцца ў браўзэры, і вы павінны ўбачыць наступнае:

Тое, што вы ўбачыце, - гэта значэнне 5, якое вы жорстка закадзіравалі ў html-файле і пераўтвараецца ў мілі.

3 - Як выкарыстоўваць нестандартную трубу ўнутры файла компонент.ts

Цяпер, калі мы ведаем, як выкарыстоўваць нядаўна створаную трубу ў файле компонент.html, якія дзеянні можна правільна выкарыстоўваць у файле компонент.ts? Ці магчыма гэта нават?

Адказ - так. Для таго, каб выкарыстаць нядаўна наладжаную трубу альбо вуглавую ўбудаваную трубу ўнутры кампанента, мы павінны ўставіць патрэбную трубу ў канструктар, а таксама дадаць яе да пастаўшчыкоў масіваў у кампаненце-дэкаратары.

Вось як гэтага дасягнуць. Адкрыйце файл компонент.ts там, дзе вы хацелі б яго выкарыстоўваць, і ў дэкаратар @Component дадайце ўласную трубку ў спіс пастаўшчыкоў.

Далей дадамо канструктар у файл компонент.ts, калі ён яшчэ не ўтрымлівае. Унутры канструктара дадамо ўласную трубу ў якасці параметра:

У гэты момант мы сказалі ў куце, што наш компонент.ts будзе мець экземпляр трубы kilometToMiles, і мы ўвялі яго праз канструктар.

Для таго, каб выкарыстоўваць трубу ў кодзе, усё, што вам трэба зрабіць у гэты момант, зрабіць наступны выклік функцыі:

this.convertToMiles.transform (x);
Заўвага: х - адлегласць у кіламетры, якую вы спрабуеце пераўтварыць у мілі.

Ніжэй прыведзены здымак экрана ўсяго кода ўнутры файла компонент.ts, які дэманструе, як выклікаць новы створаны нестандартны канал.

Каб адлюстраваць пераўтварэнне ў карыстацкім інтэрфейсе, адкрыйце файл компонент.html і проста дадайце зменную клас, якая ўтрымлівае пераўтваранае значэнне як выраз:

{{distanceInMiles}}

Сфармулюйце і запусціце свой код, і вы заўважыце, што пераўтварэнне прайшло паспяхова.

3 - Выснова

У гэтым уроку мы даведаліся, як стварыць уласную трубку і спасылацца на яе ўнутры нашага HTML і .ts кода. Хаця гэта быў просты прыклад, аднак асновы стварэння трубы не мяняюцца пры стварэнні больш складанай.

Цяпер, калі вы ведаеце, як стварыць нестандартную трубу, было б надзвычай інтрыгуюча паглядзець, што вы можаце стварыць. Я спадзяюся, што гэты ўрок быў карысным і карысным.