Vi känner alla till komponenter: det mest kraftfulla byggblocket i Angular-ekosystemet. Komponenterna är platsen där Dom renderas, tjänster injiceras, vyer renderas på nytt med ändringsdetektering. Komponenter kan ta emot värden som ingångar och utlösa händelser som utgångar. Men problemet är att detta vackra block hittills bara har fungerat inom ett Angular-ekosystem. Jag önskar att vi kunde hjälpa mänskligheten genom att använda Angular-komponenter även utanför Angular-ekosystemet.
Ja! Från och med Angular 7 har Angular tagit med sig funktionen ”Angular Element”. Nu kan en angulär komponent exporteras som en fristående webbkomponent. Vi kan använda den precis som en typisk HTML-tagg som div eller span, i en HTML-sida, CMS eller till och med i ett React- eller Vue.js-projekt.
Hur det fungerar:
Webkomponent är en webbstandard för att definiera ett nytt anpassat HTML-element i webbläsaren. Webbläsare upprätthåller ett register som kallas customElementRegistry . Med hjälp av metoden CustomElementRegistry.define() kan vi registrera en ”dom string” och en klass som definierar dess beteende.
Angulars paket @angular/elements exponerar metoden createCustomElement som omvandlar angularkomponenten och dess beroenden som en klass som är kompatibel som en webbkomponent.
För tillfället stöds webbstandarden av alla webbläsare Chrome, Firefox, Safari och Opera. Vi kan också göra den fungerande i andra webbläsare med hjälp av polyfills.
Användningsfall:
Det finns minst tre användningsfall där vi kan använda oss av exporterbara, fullt fungerande Angular-komponenter som webbkomponenter:
- Mikro front end
- Legacy code migration
- Plug & play webbkomponenter för tredjepartstjänster
Mikro front end:
Likt mikrotjänster finns det ett annat liknande begrepp som kallas för mikro-frontend. I en mikro-frontend-arkitektur är det ett litet team med full stack som ansvarar för att leverera inte bara API:erna utan även motsvarande front-end-komponenter. Till exempel kommer ”produktteamet” att skapa produkt-API:er och alla produktrelaterade vyer som används på olika kategorisidor, produktdetaljeringssidor, kundvagnssidor och kassasidor. I ett sådant fall kommer alla team att tillhandahålla olika webbkomponenter och ett front-end-team kommer bara att limma ihop dessa komponenter på olika sidor.
Migration:
Projekt som är skrivna i Angular 1.x har alltid varit en utmaning att migrera till Angular. Det finns ingen enkel magisk trollformel som ng uppdatering. Detsamma gäller för ett fall där någon vill migrera sitt projekt till Angular från React eller Vue. Webbkomponenter är den bästa lösningen här. De kan gradvis konvertera sina befintliga komponenter/controllers till Angular-webbkomponenter och ersätta dem från det befintliga systemet. När alla komponenter/kontrollanter är konverterade kan de bara ersätta det gamla systemet med det senaste angular.
Tjänster från tredje part:
Tjänsteleverantörer kan tillhandahålla plug & play-webbkomponenter som kan klistras in på kundens webbplats utan att det behövs någon ytterligare teknik.
Det verkar alltså lovande om vi faktiskt kan leverera en angularkomponent som en webbkomponent. Så låt oss göra våra händer smutsiga med själva kodningen.
Exempelprojekt:
Här är en exempelkod vi skriver en my-todo-list webbkomponent. Du kan kolla hela koden här i Github.
Steg 1: Skriv komponenten och tjänsten
- En TodoList-komponent för att visa en lista med todo’s.
- En TodoService för att hämta todo’s från platshållaren JSON API.
- Toddolist-komponenten kommer att ta ”name” som input.
- TodoList-komponenten utlöser händelsen onTodoComplete när en todo markeras som klar.
Steg 2: Anpassa app.modules för att exportera todo-list-komponenten
- Då projektet endast kommer att användas för att exportera angular-moduler som en webbkomponent behöver vi inte starta upp via app-komponenten.
- Vi måste deklarera vår exporterbara todolistkomponent som ingångskomponent.
- Installera @angular/elements-paketet.
- Inom ngDoBootstrap-kroken använder vi metoden createCustomElement för att kompilera vår todolistkomponent som en standardwebbkomponent.
- TodoList-komponent har ett beroende av TodoService. Eftersom den kommer att användas utanför det angulära ekosystemet måste vi skicka över Dependency Injector manuellt så att den kan ladda beroenden.
Steg 3: Paketering
- Nu om vi kör build – filer kommer att genereras i ”dist” mappen. Eftersom vi vill använda detta i ett annat ekosystem är det bättre att sammanfoga filerna till en enda utdatafil. Så lägg till dessa kommandon i avsnittet 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 om vi kör kommandot npm run build kommer två separata filer output-es5.js och output-es2015.js att genereras i utdatamappen.
Steg 4: Använd som webbkomponent
- Nu är allt klart. Vi kan använda dessa utdatafiler som vår fristående webbkomponent så här:-
- Om vi kör den här HTML-sidan kan vi se att todo-listan hämtas och visas.
- När vi skickade namnet som ingång kan vi se namnet i webbkomponenten – vilket innebär att komponentens ingång, ändringsdetektering fungerar!
- När vi markerar/avmarkerar någon todo, utlöses händelsen och todo data kommer att loggas i konsolen. Så utdatahändelsen fungerar också!
Så, som detta, kan vi använda en angulär komponent i något annat projekt. Du kan själv prova att klona koden från 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