de Prateek Mishra

Cum se creează elemente personalizate și componente Web Angular 6

6 pași pentru a crea elemente unghiulare utilizând CLI angular

Cum se creeaza elemente personalizate si componente Web Angular 6
Unghiular 6 elemente

Elementele unghiulare sunt componente unghiulare care transportă versiunea redusă a întregului cadru. Vă permit să creați elemente personalizate (una dintre componentele web) într-un mod cadru-agnostic. Ele pot fi utilizate în proiecte web simple, dar cu puterile Angular în interior.

După ce a citit oficialul documentație pentru elementele unghiulare mi-am dat seama că îi lipsește partea de implementare într-un mod structurat. Acesta este motivul pentru care declar pașii pentru a începe!

1. Instalați Angular CLI 6 și creați un proiect nou

npm i -g @angular/cli

ng new angular-custom-elements

Pe măsură ce Angular a introdus conceptul de elemente personalizate în Angular 6, trebuie să avem instalat v6 sau ulterior. De asemenea, puteți adăuga fișierul--style flag pentru a seta extensia de stil implicită.

2. Adăugați pachetul de elemente

Elementele personalizate nu sunt complet implementate de toate browserele. De aceea avem nevoie Polifenituri pentru a-i face să lucreze. Cu noua comandă CLI ng add puteți adăuga biblioteca angulară și polifilajele necesare:

ng add @angular/elements

3. Creați o componentă

Să creăm o componentă care va acționa ca element personalizat până la sfârșitul acestei postări:

ng g component button --inline-style --inline-template -v Native

Folosim ViewEncapsulation.Native pentru a preveni sângerarea stilurilor componentei și a afecta alte elemente. Aceasta va reda componenta noastră în implementarea nativă a browserului de shadow DOM (v0; pentru v1 pe care îl folosim ViewEncapsulation.ShadowDOM) prin gruparea tuturor stilurilor, șablonului și codului clasei de componente într-un singur fișier.

4. Adăugați proprietăți componentei

După ce ați făcut câteva modificări, componenta butonului nostru arată:

1611224465 789 Cum se creeaza elemente personalizate si componente Web Angular 6

Conform documentelor oficiale:

API-ul de creație analizează componenta care caută proprietăți de intrare și definește atributele corespunzătoare pentru elementul personalizat.

Transformă numele proprietăților pentru a le face compatibile cu elemente personalizate, care nu recunosc distincțiile de majuscule. Numele atributelor rezultate utilizează litere mici, separate prin liniuță. De exemplu, pentru o componentă cu @Input('myInputProp') inputProp, elementul personalizat corespunzător definește un atribut “my-input-prop”.

Si deasemenea:

Ieșirile componente sunt expediate ca HTML Evenimente personalizate, cu numele evenimentului personalizat care se potrivește cu numele de ieșire.

De exemplu, pentru o componentă cu @Output() valueChanged = new EventEmitter(), elementul personalizat corespunzător va expedia evenimente cu numele „valueChanged”. Datele emise vor fi stocate pe eveniment detail proprietate. Dacă furnizați un alias, se folosește acea valoare. De exemplu, @Output('myClick') clicks = new EventEmitter<string&gt; (); are ca rezultat trimiterea evenimentelor cu numele „myClick”.

5. Actualizați NgModule

1611224465 360 Cum se creeaza elemente personalizate si componente Web Angular 6

Următorii pași majori care trebuie urmați app.module.ts:

  1. Eliminați valoarea implicită bootstrap matrice care este setată la AppComponent
  2. Din moment ce a noastră ButtonComponent nu face parte din nicio altă componentă și, de asemenea, nu este o rădăcină a unei aplicații Angular, trebuie să-i spunem Angular să o compileze în mod specific. Pentru aceasta l-am pus pe entryComponents listă. În caz contrar, agitarea arborelui unghiular va scăpa această componentă din pachetul de produse.
  3. Adăuga ngDoBootstrap() pentru a spune Angular să folosească acest modul pentru bootstrapping.
  4. Unghiular oferă createCustomElement() funcție pentru conversia unei componente angulare, împreună cu dependențele sale, într-un element personalizat. createCustomElement() funcția se așteaptă să obțină doi parametri:
  • În primul rând, componenta unghiulară care ar trebui utilizată pentru a crea elementul.
  • În al doilea rând, un obiect de configurare. Acest obiect trebuie să includă proprietatea injectorului care este setată la instanța curentă a injectorului.

5. Următorul pas este să înregistrați elementul personalizat nou creat în browser. Acest lucru se face apelând customElements.define(). Vă rugăm să rețineți că acesta nu este unghiular. customElements proprietatea numai în citire aparține Fereastră interfață. Returnează o referință la CustomElementRegistry obiect. Acest obiect poate fi folosit pentru a înregistra noi elemente personalizate. De asemenea, poate obține informații despre elementele personalizate înregistrate anterior în browser.

customElements.define() metoda are nevoie de doi parametri:

  • Primul parametru este de tip șir și conține numele elementului. Trecerea șirului ‘butonul aplicației ‘ înseamnă că elementul personalizat on> va fi înregistrat și poate fi utilizat în codul HTML.
  • Al doilea parametru este elementul personalizat care a fost creat anterior.

6. Acum înlocuiți target valoare în tsconfig.json din es5 la es2015 ca și în browserele care acceptă elemente personalizate în mod nativ, specificația impune dezvoltatorilor să utilizeze clasele ES2015 pentru a defini elemente personalizate.

6. Construiește și rulează

Pentru a construi vom folosi un standard ng build comanda. Dar din moment ce scoate patru fișiere (runtime.js , scripts.js, polyfills.js și main.js) și am dori să distribuim componenta noastră ca un singur fișier js, trebuie să dezactivăm numele de fișiere hashing. Să modificăm scripts în package.json si adauga package intrare:

"scripts": {
    …,
    
"build": "ng build --prod --output-hashing=none",

// For Windows:
"package": "jscat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js",

// For Mac or Linux:
"package": "cat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js",

…,

}

Deoarece sistemul de operare Windows nu are cat execută comanda npm i jscat.

Salvați totul și rulați în cele din urmă:

npm run build && npm run package

Comanda generează custom-button-element.js pe care îl puteți include în <script> dintr-o pagină HTML pentru a vedea funcționarea elementului nostru personalizat.

Iată un exemplu:

1611224465 773 Cum se creeaza elemente personalizate si componente Web Angular 6
Includeți custom-button-element.js în orice index.html

rezumat

Pe scurt, am:

  • S-au adăugat biblioteci importante pentru implementare
  • A înregistrat componenta în CustomElementRegistry din browser
  • Combinate artefacte de construire într-un singur fișier

Puteți găsi codul sursă complet aici.

Ai învățat ceva nou? Dacă da, vă rog să bateți din palme? buton mai jos, astfel încât mai mulți oameni să poată vedea acest lucru.