9 leņķis iesācējiem - komponenti un virkņu interpolācija

Mūsdienu tīmekļa izstrādē daudzi izstrādātāji dod priekšroku vietnes lietotāja saskarnes veidošanai uz komponentiem balstītā veidā. To atbalsta arī visas mūsdienu sistēmas. Izpratne par to, kā komponenti darbojas un kā tos izmantot, ir liels solis Angular apguvē.

Šajā amatā jūs uzzināsiet par leņķa komponentiem, kā izveidot un izmantot komponentu projektā un kas ir virkņu interpolācija. Es aplūkošu arī citas svarīgās Angular iezīmes savos gaidāmajos rakstos:

  • 1. daļa: Kā instalēt savu pirmo lietotni ar leņķa CLI
  • 2. daļa: Leņķiskie komponenti un virkņu interpolācija (jūs esat šeit)
  • 3. daļa : Leņķiskās direktīvas un caurules
  • 4. daļa: Vienvirziena datu saistīšana leņķiski
  • 5. daļa: Leņķiskā divvirzienu datu saistīšana ar ngModel

Ja vēlaties, varat arī noskatīties video versiju:

Kas ir komponents?

Komponenti ir elementārākie Angular lietojuma veidotāji. Mēs varam iedomāties komponentus, piemēram, LEGO gabalus. Mēs izveidojam komponentu vienu reizi, bet varam tos izmantot vairākas reizes, cik mums nepieciešams dažādās projekta daļās.

Leņķa komponents ir izgatavots no 3 galvenajām daļām:

  • HTML veidne - skatīt
  • TypeScript fails - modelis
  • CSS fails - veidošana

Kāpēc mums ir nepieciešami komponenti?

Komponentu izmantošana ir izdevīga daudzos veidos. Komponenti sadala lietotāja saskarni mazākos skatos un renderē datus. Komponentu nevajadzētu iesaistīt tādos uzdevumos kā HTTP pieprasījumu veikšana, pakalpojumu darbības, maršrutēšana utt. Šī pieeja uztur kodu tīru un atdala skatu no citām daļām (skat. Problēmu atdalīšanu).

Vēl viens svarīgs iemesls ir tas, ka komponenti sadala kodu mazākos, atkārtoti lietojamos gabalos. Pretējā gadījumā mums būtu jāiekļauj bezgalīgas koda rindas vienā HTML failā, kas padara kodu daudz grūtāk uzturamu.

Mūsu pirmā leņķa komponenta izveide

Tagad izveidosim savu pirmo komponentu. Īss komponenta izveides veids ir leņķa CLI izmantošana:

ng g c component-name

Šī komanda izveido pavisam jaunu komponentu ar saviem failiem (HTML, CSS un TypeScript) un automātiski reģistrē to lietotņu modulī:

Piezīme: Programmā Angular mums ir jāreģistrē visi nepieciešamie pakalpojumi, komponenti un moduļi moduļa failā.

Tagad aplūkosim tuvāk komponenta modeli (TypeScript komponenta fails):

Šī faktiski ir TypeScript klase, taču, lai to definētu kā sastāvdaļu:

  • Pirmkārt, mums jāimportē komponents no @ angular / core bibliotēkas, lai mēs varētu izmantot komponentu dekoratoru
  • Par @Component noformēšanas iezīmē klases kā komponents, un ļauj mums pievienot šādu metadatus
  • Selektors ir zvanot uz komponentu vēlākā kā HTML tagu:
  • TemplateUrl ir ceļš, kur atrodas komponenta HTML skats.
  • S veida URL (var būt vairāk nekā 1) ir vieta, kur atrodas komponenta veidošanas faili.
  • Visbeidzot, mēs eksportējam klasi (komponentu), lai vēlāk to varētu izsaukt app.module vai citās projekta vietās.

Kas ir virkņu interpolācija?

Viens no visbiežāk uzdotajiem jautājumiem, ko cilvēki uzdod par leņķisko, ir tas, kāda ir šī cirtaino bikšturu sintakse. Komponenti atveido datus, bet dati var mainīties laikā, tāpēc tiem jābūt dinamiskiem.

Dinamisko datu renderēšanai mēs izmantojam cirtainās lencītes citu cirtaino lencīšu iekšpusē: {{ data }}un šo attēlojumu sauc par virkņu interpolāciju. Piemēru varat skatīt iepriekš redzamajā video versijā.

Satīt

Viens no lielākajiem Angular mācīšanās posmiem ir zināt, kā izveidot komponentus un tos efektīvi izmantot. Es ceru, ka jums šī ziņa būs noderīga. Nākamajā daļā mēs aplūkosim tādas leņķa direktīvas kā ng-if, ng-for, ng-class un citas. Sekojiet līdzi :)

Ja vēlaties uzzināt vairāk par tīmekļa izstrādi, droši sekojiet man Youtube !

Paldies par lasīšanu!