A komponenseket mindannyian ismerjük: az Angular ökoszisztéma legerősebb építőkövei. A komponensek azok, ahol a Dom renderelésre kerül, a szolgáltatások injektálásra kerülnek, a nézetek újra renderelésre kerülnek változásérzékeléssel. A komponensek bemenetként értékeket vehetnek fel, kimenetként pedig eseményeket indíthatnak el. De a probléma az, hogy ez a gyönyörű blokk eddig csak az Angular ökoszisztémán belül működik. Szeretném, ha tudnánk segíteni az emberiséget az angular komponensek használatával az angular ökoszisztémán kívül is.
Igen! Az Angular 7-től az Angular elhozza az “Angular Element” funkciót. Most egy angular komponens exportálható önálló webkomponensként. Pontosan úgy használhatjuk, mint egy tipikus HTML taget, mint a div vagy span, bármilyen HTML oldalon, CMS-ben vagy akár egy React vagy Vue.js projektben.
Hogyan működik:
A webkomponens egy webes szabvány egy új egyéni HTML-elem meghatározására a böngészőben. A böngészők egy regisztert tartanak fenn, melynek neve customElementRegistry . A CustomElementRegistry.define() metódus segítségével regisztrálhatunk egy “dom string”-et és egy osztályt, amely meghatározza a viselkedését.
Angular @angular/elements csomagja kiteszi a createCustomElement metódust, amely átalakítja az angular komponenst és függőségeit egy webkomponensként kompatibilis osztályként.
A webszabványt jelenleg minden Chrome, Firefox, Safari és Opera böngésző támogatja. Polyfills segítségével más böngészőkben is működőképessé tehetjük.
Használati esetek:
Legalább 3 olyan használati eset van, ahol az exportálható, teljesen funkcionális angular komponenseket webkomponensként használhatjuk:
- Mikro frontend
- Legációs kódmigráció
- Plug & play webkomponensek harmadik féltől származó szolgáltatásokhoz
Mikro frontend:
A mikroszolgáltatáshoz hasonlóan létezik egy másik hasonló koncepció is, amit mikro frontendnek hívnak. A mikro-frontend architektúrában egy kis full-stack csapat felelős azért, hogy ne csak az API-kat, hanem a hozzájuk tartozó front-end komponenseket is szállítsa. Például a “termékcsapat” hozza létre a termék API-kat és az összes termékkel kapcsolatos nézetet, amelyeket a különböző kategóriaoldalakon, a termék részletező oldalán, a kosár & pénztár oldalán használnak. Egy ilyen esetben minden csapat különböző webkomponenseket fog biztosítani, és egy front end csapat csak ezeket a komponenseket fogja összeragasztani a különböző oldalakon.
Migráció:
Az Angular 1.x-ben írt projektek, az Angularra való migráció mindig is kihívást jelentett. Nincs egyszerű varázsige-szerű ng update varázslat. Ugyanez igaz arra az esetre is, ha valaki Reactról vagy Vue-ról akarja Angularra migrálni a projektjét. Itt a webkomponensek a legjobb megoldás. A meglévő komponenseiket/vezérlőiket fokozatosan konvertálhatják Angular webkomponensekre, és lecserélhetik a meglévő rendszerből. Miután az összes komponenst/vezérlőt átalakították, egyszerűen lecserélhetik a régi rendszert a legújabb angularra.
Harmadik fél szolgáltatásai:
A szolgáltatók plug & play webkomponenseket tudnak biztosítani, amelyeket be lehet ragasztani az ügyfél weboldalába anélkül, hogy további tervezésre lenne szükség.
Az tehát ígéretesnek tűnik, ha valóban szállíthatunk egy angular komponenst webkomponensként. Szóval piszkoljuk be a kezünket a tényleges kódolással.
Példaprojekt:
Itt egy példakód, amivel megírjuk a my-todo-list webkomponenst. FYI a teljes kódot megnézheti itt a Githubon.
1. lépés: A komponens és a szolgáltatás megírása
- A TodoList komponens a todók listájának megjelenítéséhez.
- A TodoService a todók lehívásához a helyőrző JSON API-ból.
- A TodoList komponens a “name”-t fogja bemenetként fogadni.
- A TodoList komponens kiváltja az onTodoComplete eseményt, amikor bármely todo késznek lesz jelölve.
Step 2: Tweak app.modules to export todo-list component
- Mivel a projektet csak az angular modulok webkomponensként való exportálására fogjuk használni, nincs szükségünk bootstrappingre az app komponensen keresztül.
- Az exportálható todo-list komponensünket belépő komponensként kell deklarálnunk.
- Telepítsük a @angular/elements csomagot.
- A ngDoBootstrap hookon belül a createCustomElement metódust használjuk a TodoList komponensünk standard webkomponensként való lefordításához.
- A TodoList komponensnek függősége van a TodoService-től. Mivel az angular ökoszisztémán kívül fogjuk használni, manuálisan át kell adnunk a Dependency Injectort, hogy az be tudja tölteni a függőségeket.
3. lépés: Csomagolás
- Most ha futtatjuk a buildet – a fájlok a “dist” mappában lesznek generálva. Mivel ezt egy másik ökoszisztémában akarjuk felhasználni jobb, ha a fájlokat egy kimeneti fájlként összevonjuk. Tehát adjuk hozzá ezeket a parancsokat a package.json script szakaszhoz:-
"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",
- Most ha futtatjuk az npm run build parancsot két különálló fájl output-es5.js és output-es2015.js fog keletkezni a kimeneti mappán belül.
4. lépés: Használjuk webkomponensként
- Most minden készen áll. Ezeket a kimeneti fájlokat önálló webkomponensként használhatjuk a következőképpen:-
- Ha ezt a HTML oldalt futtatjuk, láthatjuk, hogy a todo lista előhívásra és megjelenítésre kerül.
- A nevet adtuk át bemenetként, láthatjuk a nevet a webkomponensen belül – ami azt jelenti, hogy a komponens bemenete, változásérzékelése működik!
- Mihelyt bármely todo-t bejelöljük/kiiktatjuk, eseményt vált ki és a todo adatok naplózásra kerülnek a konzolon. Tehát a kimeneti esemény is működik!
Az angular komponenst így bármely más projektben is használhatjuk. Kipróbálhatod magad a kód klónozásával a Githubról.
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