Бұрыш 9-да жеке құбырды қалай жасау керектігін көрсететін қадамдық мысал

Бұрыштық құбырлар, HTML-де мәлімделуге болатын дисплей мәнін түрлендіруді жазу тәсілі.

Бұрыштық рамка сіздің қолданбаңызда қолдануға болатын кіріктірілген құбырлар жиынтығын ұсынады. Келесі [сілтеме] қол жетімді әр түрлі құбырларды бөлектейтін API құжаттамасына сілтеме.

Біз барлық веб-қосымшалардың бірдей жасалмайтындығын және кейбір жағдайларда қазіргі уақытта Бұрыштық жүйемен қамтамасыз етілмеген ақпаратты көрсету кезінде өзгермелі өзгерісті қажет ететінін білеміз. Не істеу керек?

Бұл мәселені @NgModule декларациясына қосу арқылы өз өтініміңізде тіркеуге болатын қайта пайдалануға болатын жеке құбыр құру арқылы оңай шешуге болады. Содан кейін сізге қажет жерде сілтеме жасай аласыз.

Бұл оқулықта мен сізді келесі қадамдар бойынша өткіземін:

  • Өзгермелі құбыр жасаңыз
  • Реттелетін құбырды тіркеңіз
  • Жаңадан жасалған құбырды қолданыңыз

Мұны көрсету үшін біз келесі математикалық түрлендіруді қолдана отырып, шақырымды мильге айналдыратын / жасай алатын құбыр құрамыз:

Бір мильде 1.609344 километр бар. Миллеттерді километрге айналдыру үшін миль мәнін 1,609344 көбейтіңіз.
Айырбастау формуласы: d (mi) = d (km) / 1.609344
Мысал: арақашықтық (миль) = 5 (км) / 1.6093 = 3,11 миль

1 - реттелетін құбыр жасаңыз

Енді өзіміздің жеке түтікке арналған кодты қамтитын мәтіндік файлды құрайық. Өзіңіздің бұрыштық жобаңызға келесі команданы VScode енгізіңіз:> ng gp ./custom-pipes/kilometersToMiles

Бұл команда келесі файл құрылымында екі файл шығарады: app> custom-quvur.

  • шақырым-миль.пипет.спекциясы
  • шақырым-миль.пип.ц.

Сонымен қатар, бұл пәрмен жаңадан құрылған жеке трубаны app.module.ts файлындағы @NgModule декларациясына тіркейді / қосады.

Енді арнайы құбыр файлы жасалды, біз конверсиялау операциясын орындау үшін кодты енгізуіміз керек. Mile.pipe.ts файлын ашып, келесі кодты қосыңыз:

трансформация (мән: сан): саны {const kilometInMile = 1.609344; if (! isNaN (value)) {қайтару мәні / километрInMile; } қайтару null; }

Енді шақырымнан мильге.pipe.ts келесідей болуы керек:

Осы кезде біз арнайы құбырды жасадық және ол пайдалануға дайын.

2 - реттелетін құбырды қалай пайдалануға / сілтеме жасауға болады

Сіздің жобаңызда html құрамдас файлын ашыңыз, онда сіз осы жеке құбырды пайдаланғыңыз келеді және келесі өрнек қосыңыз:

{{5 | шақырым

Бұл өрнекте біз құбырды мильге түрлендіру үшін километрдің 5 мәні бойынша қолданғымыз келетінімізді айтамыз.

Өзгерісті көру үшін VScode терминалында жобаңызды құруға және іске қосуға арналған келесі пәрменде теріңіз:> ng service -o

Код құрастырылғаннан кейін сіздің жобаңыз браузерде іске қосылады және сіз мыналарды көресіз:

Сіз html файлында қате кодталған 5-ші мәнді милионға түрлендірілген / өзгергенін көресіз.

3 - құрамдас.тс файлының ішінде жеке құбырды пайдалану әдісі

Жаңадан жасалған құбырды компонент.html файлында қалай қолдану керектігін білетін болсақ, оны компонент.ts файлында дұрыс пайдалану үшін қандай қадамдар қажет? Бұл мүмкін бе?

Жауап: иә. Жаңадан жасалған құбырды немесе құрамдас бөліктің ішіне бұрыштық салынған құбырды пайдалану үшін біз қалаған құбырды конструкторға салып, оны компонент декораторындағы массив провайдерлеріне қосуымыз керек.

Бұған қалай жетуге болатыны туралы. Өзіңіз пайдаланғыңыз келетін компонент.ts файлын ашыңыз және @Component декораторында провайдерлер тізіміне жеке құбырды қосыңыз.

Әрі қарай, егерде ондай файл болмаса, компонент.ts файлына конструкторды қосайық. Конструктордың ішіне параметр ретінде жеке құбырды қосайық:

Осы кезде біз компонент.ts-де километрге арналған ToMiles құбыры болатындығын және біз оны конструктор арқылы енгіздік деп бұрыштық түрде айттық.

Құбырды код түрінде пайдалану үшін сізге келесі функцияны орындау қажет:

this.convertToMiles.transform (x);
Ескерту: x - сіз мильге айналдырғыңыз келетін километрдегі қашықтық.

Төменде компонент.ts файлындағы барлық кодтың скриншоты, жаңадан жасалған өзгермелі құбырды қалай шақыруға болатындығы көрсетілген.

UI интерфейсін көрсету үшін, компонент.html файлын ашыңыз және өрнек ретінде түрлендірілген мәнді қамтитын класс айнымалысын қосыңыз:

{{DistanceInMiles}}

Кодты құрастырыңыз және іске қосыңыз, сіз айырбастау сәтті өткенін байқайсыз.

3 - қорытынды

Бұл оқулықта біз html және .ts коды ішінде жеке құбырды қалай құруға болатындығын және оған сілтеме жасауды білдік. Дегенмен, бұл қарапайым мысал болды, бірақ құбыр жасау негіздері күрделірек болған кезде өзгермейді.

Енді сіз өзіңіз жасайтын құбырды қалай жасау керектігін білетін болсаңыз, не жасай алатындығыңызды білу өте қызықты болар еді. Бұл оқулық пайдалы болды деп сенемін.