Vi kender alle til komponenter: den mest kraftfulde byggesten i Angular-økosystemet. Komponenter er der, hvor Dom bliver renderet, tjenester bliver injiceret, visninger bliver re-renderet med ændringsdetektion. Komponenter kan tage værdier som input og udløse begivenheder som output. Men problemet er, at denne smukke blok indtil videre kun fungerer inden for et Angular-økosystem. Jeg ville ønske, at vi kunne hjælpe menneskeheden ved at bruge angulære komponenter selv uden for det angulære økosystem.
Ja! Fra Angular 7 bringer Angular funktionen “Angular Element”. Nu kan en angular komponent eksporteres som en selvstændig webkomponent. Vi kan bruge den præcis som et typisk HTML-tag som div eller span, i enhver HTML-side, CMS eller endda inde i et React- eller Vue.js-projekt.
Sådan fungerer det:
foto:
foto:
Webkomponent er en webstandard til at definere et nyt brugerdefineret HTML-element i browseren. Browsere vedligeholder et register kaldet customElementRegistry . Ved hjælp af metoden CustomElementRegistry.define() kan vi registrere en “dom-streng” og en klasse, der definerer dens adfærd.
Angular’s @angular/elements-pakke udsætter metoden createCustomElement, som konverterer angular-komponenten og dens afhængigheder som en klasse, der er kompatibel som en webkomponent.
I øjeblikket understøttes webstandard af alle Chrome-, Firefox-, Safari- og Opera-browsere. Vi kan også gøre det funktionsdygtigt i andre browsere ved hjælp af polyfills.
Anvendelsestilfælde:
Der er mindst 3 anvendelsestilfælde, hvor vi kan gøre brug af eksporterbare fuldt funktionelle angulære komponenter med fuld funktionalitet som webkomponenter:
- Micro front end
- Legacy code migration
- Plug & play webkomponenter til tredjepartstjenester
Micro front end:
Som micro-service er der et andet lignende koncept kaldet micro-frontend. I en mikro-frontend-arkitektur er et lille full-stack-team ansvarlig for at levere ikke kun API’erne, men også deres tilsvarende frontend-komponenter. For eksempel vil “produktteamet” oprette produkt-API’er og alle produktrelaterede visninger, der bruges på forskellige kategorisider, produktdetaljesider, indkøbsvogn &-kasseside. I et tilfælde som dette vil alle teamet levere forskellige webkomponenter, og et frontend-team vil kun lime disse komponenter sammen på forskellige sider.
Migration:
Projekter skrevet i Angular 1.x, Migration til Angular har altid været en udfordring. Der er ingen nem magisk trylleformular som ng opdatering. Det samme gælder for et tilfælde, hvor nogen ønsker at migrere deres projekt til Angular fra React eller Vue. Webkomponenter er den bedste løsning her. De kan gradvist konvertere deres eksisterende komponenter/controllere til Angular webkomponenter og erstatte dem fra det eksisterende system. Når alle komponenter/controllere er konverteret, kan de bare erstatte det gamle system med det nyeste angular.
Tjenesteydelser fra tredjepart:
Tjenesteudbydere kan levere plug & play webkomponenter, der skal limes i deres kunders websted uden yderligere ingeniørarbejde.
Så synes det lovende, hvis vi faktisk kan sende en angular komponent som en webkomponent. Så lad os gøre vores hænder beskidte med den faktiske kodning.
Eksempelprojekt:
Her er et eksempel kode vi skriver en my-todo-list webkomponent. FYI kan du tjekke hele koden her i Github.
Stræk 1: Skriv komponenten og tjenesten
- En TodoList-komponent til at vise en liste over todo’er.
- En TodoService til at hente todo’er fra placeholder JSON API.
- Den TodoList-komponent vil tage “name” som input.
- TodoList-komponenten vil udløse onTodoComplete-hændelsen, når en todo bliver markeret som færdig.
Stræk 2: Tweak app.modules til at eksportere todo-list-komponent
- Da projektet kun vil blive brugt til at eksportere angular-moduler som en webkomponent, behøver vi ikke bootstrapping gennem app-komponenten.
- Vi skal erklære vores eksporterbare todo-listekomponent som entry-komponenter.
- Installer @angular/elements-pakken.
- Inden for ngDoBootstrap hook bruger vi createCustomElement-metoden til at kompilere vores TodoList-komponent som en standardwebkomponent.
- TodoList-komponent har afhængighed af TodoService. Da den vil blive brugt uden for det angulære økosystem, er vi nødt til at videregive Dependency Injector manuelt, så den kan indlæse afhængigheder.
Stræk 3: Bundling
- Nu hvis vi kører build – filer vil blive genereret i “dist” mappe. Da vi ønsker at bruge dette i et andet økosystem, er det bedre at sammenføje filerne som én outputfil. Så tilføj disse kommandoer i afsnittet package.json script:-
"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
- Nu, hvis vi kører kommandoen npm run build, vil der blive genereret to separate filer output-es5.js og output-es2015.js inde i output-mappen.
Stræk 4: Brug som en webkomponent
- Nu er alt indstillet. Vi kan bruge disse outputfiler som vores selvstændige webkomponent på denne måde:-
- Hvis vi kører denne HTML-side, kan vi se, at todo-listen bliver hentet og vist.
- Vi videregav navnet som input, kan vi se navnet inde i webkomponenten – hvilket betyder, at komponentens input, ændringsdetektion fungerer!
- Når vi markerer/afmærker en todo, udløses begivenhed, og todo-data logges i konsollen. Så outputbegivenheden fungerer også!
Så, som dette, kan vi bruge en angular komponent i ethvert andet projekt. Du kan selv prøve at klone koden fra Github.
Ref:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
- https://angular.io/guide/elements