Wszyscy znamy komponenty: najpotężniejszy budulec w ekosystemie Angular. Komponenty są miejscem, w którym Dom jest renderowany, usługi są wstrzykiwane, widoki są ponownie renderowane z wykrywaniem zmian. Komponenty mogą przyjmować wartości jako dane wejściowe i wyzwalać zdarzenia jako dane wyjściowe. Ale problem polega na tym, że ten piękny blok jak na razie działa tylko wewnątrz ekosystemu Angulara. Chciałbym, abyśmy mogli pomóc ludzkości, używając kątowych komponentów nawet poza ekosystemem kątowym.
Tak! Od Angular 7, Angular przynosi funkcję „Angular Element”. Teraz komponent kątowy może być wyeksportowany jako samodzielny komponent sieciowy. Możemy go używać dokładnie tak, jak typowego znacznika HTML, takiego jak div lub span, w dowolnej stronie HTML, CMS lub nawet wewnątrz projektu React lub Vue.js.
Jak to działa:
Web Component to standard sieciowy umożliwiający zdefiniowanie nowego niestandardowego elementu HTML w przeglądarce. Przeglądarki utrzymują rejestr o nazwie customElementRegistry . Używając metody CustomElementRegistry.define() możemy zarejestrować „łańcuch domowy” i klasę, która definiuje jego zachowanie.
Pakiet @angular/elements Angulara eksponuje metodę createCustomElement, która konwertuje komponent kątowy i jego zależności jako klasę kompatybilną jako komponent webowy.
Obecnie standard webowy jest obsługiwany przez wszystkie przeglądarki Chrome, Firefox, Safari i Opera. Możemy również sprawić, że będzie on działał w innych przeglądarkach za pomocą polyfill.
Przypadki użycia:
Istnieją co najmniej 3 przypadki użycia, w których możemy wykorzystać eksportowalne, w pełni funkcjonalne komponenty kątowe jako komponenty sieciowe:
- Micro front end
- Migracja kodu legacy
- Plug & play web components for third-party services
Micro front end:
Podobnie jak micro-service, istnieje inna podobna koncepcja zwana micro-frontend. W architekturze micro-frontend, mały zespół full-stack jest odpowiedzialny za dostarczanie nie tylko interfejsów API, ale także odpowiadających im komponentów front-end. Na przykład, „zespół produktu” stworzy API produktu i wszystkie widoki związane z produktem używane w różnych stronach kategorii, strona szczegółów produktu, koszyka & strona kasy. W przypadku takim jak ten, wszystkie zespoły będą dostarczać różne komponenty webowe, a jeden zespół front-end będzie tylko sklejał te komponenty na różnych stronach.
Migracja:
Projekty napisane w Angular 1.x, Migracja do Angular zawsze była wyzwaniem. Nie ma łatwego magicznego zaklęcia jak aktualizacja ng. Podobnie jest w przypadku, gdy ktoś chce zmigrować swój projekt do Angulara z Reacta lub Vue. Komponenty sieciowe są tutaj najlepszym rozwiązaniem. Mogą oni stopniowo konwertować swoje istniejące komponenty/kontrolery na komponenty webowe Angular i zastępować je z istniejącego systemu. Po przekonwertowaniu wszystkich komponentów / kontrolerów mogą po prostu zastąpić starszy system najnowszym angular.
Usługi stron trzecich:
Dostawcy usług mogą zapewnić komponenty sieciowe plug & play, które mają być wklejone w witrynę klienta bez konieczności dalszej inżynierii.
Więc wydaje się, że jest to obiecujące, jeśli możemy faktycznie wysłać komponent kątowy jako komponent sieciowy. Więc zabrudzimy sobie ręce faktycznym kodowaniem.
Przykładowy projekt:
Tutaj jest przykładowy kod, w którym piszemy komponent webowy my-todo-list. FYI możesz sprawdzić cały kod tutaj w Github.
Krok 1: Napisz komponent i usługę
- Komponent TodoList do wyświetlania listy todo.
- A TodoService do pobierania todo z placeholder JSON API.
- Komponent TodoList będzie pobierał „name” jako dane wejściowe.
- Komponent TodoList będzie wyzwalał zdarzenie onTodoComplete, gdy dowolne todo zostanie oznaczone jako zrobione.
Krok 2: Podrasuj app.modules aby wyeksportować komponent todo-list
- Ponieważ projekt będzie używany tylko do eksportowania modułów kątowych jako komponentu webowego nie potrzebujemy bootstrappingu poprzez komponent app.
- Musimy zadeklarować nasz eksportowalny komponent todo-list jako komponenty wejściowe.
- Instalujemy pakiet @angular/elements.
- Wewnątrz haka ngDoBootstrap używamy metody createCustomElement aby skompilować nasz komponent TodoList jako standardowy komponent webowy.
- Komponent TodoList ma zależność od TodoService. Ponieważ będzie on używany poza ekosystemem kątowym, musimy ręcznie przekazać Dependency Injector, aby mógł on załadować zależności.
Krok 3: Bundling
- Teraz jeśli uruchomimy build – pliki zostaną wygenerowane w folderze „dist”. Ponieważ chcemy użyć tego w innym ekosystemie lepiej jest połączyć pliki jako jeden plik wyjściowy. Więc dodaj te komendy w sekcji skryptu package.json:-
"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",
- Teraz jeśli uruchomimy komendę npm run build dwa oddzielne pliki output-es5.js i output-es2015.js zostaną wygenerowane wewnątrz folderu wyjściowego.
Krok 4: Użyj jako komponentu webowego
- Teraz wszystko jest gotowe. Możemy użyć tych plików wyjściowych jako naszego samodzielnego komponentu sieciowego w ten sposób:-
- Jeśli uruchomimy tę stronę HTML, możemy zobaczyć, że lista todo zostanie pobrana i wyświetlona.
- Przekazaliśmy nazwę jako wejście, możemy zobaczyć nazwę wewnątrz komponentu sieciowego – co oznacza, że wejście komponentu, wykrywanie zmian działa!
- Gdy zaznaczymy/odznaczymy dowolne todo, zostanie wyzwolone zdarzenie, a dane todo zostaną zapisane w konsoli. Tak więc zdarzenie wyjściowe również działa!
Więc, w ten sposób możemy użyć komponentu kątowego w każdym innym projekcie. Możesz spróbować samemu sklonować kod z Githuba.
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
.