ჩაშენებული ფაიფები

გავეცნოთ ანგულარში ჩაშენებულ ძირითად და ყველაზე გამოყენებად ფაიფებს. წინამდებარე ფაიფები CommonModule-ის ნაწილია, ამიტომ ის დააიმპორტეთ თქვენ კომპონენტში.

DatePipe

DatePipe არის ერთ-ერთი ყველაზე გამოყენებადი ფაიფი. იგი გარდაქმნის თარიღის ფორმატს.

ვთქვათ, კლასში გვაქვს შექმნილი Date ობიექტი:

holiday = new Date(1918, 5, 26);

ამ ობიექტის წაკითხვად ფორმატში გარდაქმნისთვის არ გვჭირდება ბევრი წვალება.

<p>Georgian independence day is {{ holiday | date }}</p>

ჩვენ თემფლეითის ექსფრეშენში ვიყენებთ ცვლადს, რომელსაც მოყვება |, ე.წ ფაიფ სიმბოლო და შემდგომ ფაიფის სახელი. შედეგად ბრაუზერში ჩვენ დაფორმატებული თარიღი უნდა დავინახოთ.

რადგან ფაიფებს ერთგვარ ფუნქციებად განვიხილავთ, მათთვის პარამეტრების მიწოდებაც არის შესაშლებელი ფაიფის სახელის შემდეგ : სიმბოლოს საშუალებით, რომელსაც უნდა მოყვეს პარამეტრად მისაღები ექსფრეშენი:

<p>Georgian independence day is {{ holiday | date:"dd/MM/yy" }}</p>

აქ ჩვენ სტრინგის ტიპის პარამეტრით მივუთითებთ როგორი ფორმატით გვინდა თარიღის გამოსახვა. წინასწარ განსაზღვრული პარამეტრების საშუალებით ჩვენ გვაქვს უფრო მეტი კონტროლი ტრანსფორმირებულ შედეგზე. თითოეული ფაიფისთვის მოძებნეთ შესაძლო პარამეტრების დოკუმენტაცია ანგულარის ვებსაიტზე.

აქვე გასათვალისწინებელია, რომ ფაიფები არა მხოლოდ ინტერპოლაციის დროს, არამედ ფროფერთი ბაინდინგის დროსაც გამოიყენება.

UpperCasePipe & LowerCasePipe

UpperCasePipe-ითა და LowerCasePipe-ის საშუალებით ჩვენ შეგვიძლია ტექსტის ქეისის შეცვლა.

title = "Hello there";

<p>{{ title | uppercase }}</p>
<p>{{ title | lowercase }}</p>

შესაძლებელია რამდენიმე ფაიფის ერთდროულად გამოყენება. მონაცემები ფაიფების თანმიმდევრობის მიხედვით ტრანსფორმირდება:

<p>{{ holiday | date | uppercase }}</p>

აქ ჩვენ holiday თვისებას ჯერ თარიღად ვაფორმატებთ და შემდეგ ტექსტს აფერქეისად გარდავქმნით.

CurrencyPipe

CurrencyPipe გარდაქმნის რიცხვს ვალუტის აღმნიშვნელ ტექსტად, რომელიც დაფორმატებული იქნება ლოკალის შესაბამისად:

budget = 50.335;

<p>Budget: {{ budget | currency }}</p>
<!--output '$50.34'-->
<p>Budget: {{ budget | currency:"EUR" }}</p>
<!--output '€50.34'-->
<p>Budget: {{ budget | currency:"EUR":"code" }}</p>
<!-- output 'EUR50.34' -->

მესამე მაგალითში ჩვენ მეორე პარამეტრს ვაწვდით ფაიფს, რომ ვალუტა კოდური სახელით გამოსახოს. როგორც ხედავთ, შესაძლებელია ერთზე მეტი პარამეტრის მიწოდება.

DecimalPipe

DecimalPipe გამოიყენება რიცხვების დასაფორმატებლად.

დიდ რიცხვებს ის წაკითხვადი ფორმით აფირმატებს:

<p>{{1000000 | number}}</p>
<!-- output '1,000,000' -->

მას ასევე შეუძლია არამთელი რიცხვების დამრგვალება. ამისთვის გარკვეული ფორმატით უნდა მივაწოდოთ პარამეტრები:

<p>{{3.6 | number: '1.0-0'}}</p>
<!--will output '4'-->

<p>{{-3.6 | number:'1.0-0'}}</p>
<!--will output '-4'-->

პარამეტრში 1 გულისხმობს მინიმალური ციფრების რაოდენობას წერტილამდე. პირველი ნული ნიშნავს წერტილის შემდეგ მინიმალური ციფრების ოდენობას. მეორე ნული ნიშნავს წერტილის შემდეგ მაქსიმალური ციფრების რაოდენობას. ამ პარამეტრის საფუძველზე ხდება რიცხვების დამრგვალება.

PercentPipe

PercentPipe რიცხვს გარდაქმნის პროცენტული მაჩვენებლის სტრინგად:

<p>{{ 0.259 | percent }}</p>
<!--output '26%'-->

აქ შესაძლებელია DecimlPipe-ის მსგავსი პარამეტრების მიწოდება, რათა უფრო კონკრეტულად დავაფორმატოთ შედეგი.

შეჯამება

ამ თავში ჩვენ განვიხილეთ ფაიფების დანიშნულება ანგულარში და შევისწავლეთ ანგულარში არსებული რამდენიმე ფაიფი.