Używanie Angular Elements – Why and How – Part 1

BY admin
|

Getting Started

Zacznijmy od stworzenia nowego Angular Project w naszym systemie. W tym celu upewnij się, że masz zainstalowaną najnowszą wersję Angular CLI. Uruchom następującą komendę w swoim terminalu:

$ npm install -g @angular/cli

Po zakończeniu tej instalacji, możemy użyć jej do stworzenia nowej początkowej aplikacji w naszym systemie w ten sposób:

$ ng new angular-app

Wtedy zostaniesz poproszony o wybranie dodatkowych funkcji, które możesz chcieć dodać do swojego projektu Angular, rzeczy takie jak routing i typ formatu arkusza stylów. Wybierz domyślną odpowiedź, naciskając klawisz Enter/Return.

CLI instaluje niezbędne pakiety Angulara i zależności w folderze o nazwie angular-app. Możesz zaserwować tę aplikację do przeglądarki, uruchamiając następujące polecenia:

$ cd angular-app
$ ng serve --open 
// --open flag will open the browser for you

Jak widzisz, aplikacja zawiera już kilka rzeczy, które możemy wyświetlić na ekranie. Ale nie są nam one potrzebne. Wracamy więc do edytora kodu (ja ❤️ VS Code) i usuwamy wszystko wewnątrz pliku src/app/app.component.html i piszemy pojedynczy element <h1>.

<h1>Welcome To Angular Elements!</h1>

Jeśli przyjrzymy się strukturze plików, zobaczymy, że każdy komponent w angular składa się z mnóstwa plików. Dla samego komponentu App istnieją pliki .ts, .html, .css, oraz plik spec.ts, który zawiera testy, a także plik module.ts. Będzie również opcjonalny plik routing.module.ts, jeśli zdecydowałeś się dodać funkcję routingu do aplikacji podczas tworzenia jej za pomocą CLI.

Zamiast pisać wszystkie te pliki dla naszych komponentów, Angular CLI daje nam skróconą metodę, która wygeneruje te pliki za nas. Użyjmy tej metody, aby utworzyć komponent HelloWorld w naszym systemie.

$ ng g c HelloWorld

To pojedyncze polecenie utworzy folder o nazwie hello-world wewnątrz folderu app. Jeśli otworzysz ten plik, znajdziesz w nim następujące 4 pliki:

  • hello-world.component.css
  • hello-world.component.html
  • hello-world.component.spec.ts
  • hello-world.component.ts

Będziemy używać tylko plików .html i .ts. Istnieją dodatkowe flagi, które możemy przekazać do polecenia ng g c. Aby jednak zachować prostotę i trzymać się tematu, nie będę ich używał. Sprawdź Angular Docs, aby dowiedzieć się więcej o tym, jak używać tego polecenia.

Wewnątrz pliku hello-world.component.ts zobaczysz, że selector jest ustawione na app-hello-world. Jeśli więc dodamy to do app.component.html w taki sposób:

<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>

Wtedy zawartość hello-world.component.html zostanie wyświetlona w przeglądarce.

Nasza wstępna konfiguracja jest już gotowa. Zacznijmy od tego, jak używać Angular Elements.

Convert A Component Into Custom Element

W tej chwili mamy prosty komponent HelloWorld, który po prostu drukuje jakiś tekst na ekranie. Przyjrzyjmy się, jak możemy wstawić ten komponent do aplikacji w bardziej dynamiczny sposób. Aby to zrobić, zastąpmy app-hello-world przez div i button. Dodajmy także listener click do button, tak aby po kliknięciu przycisku mógł zostać wyświetlony komponent HelloWorld. Zostanie to obsłużone przez funkcję showMessage(). Przejdź więc do strony app.component.html i dokonaj następujących zmian:

<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>

Następnie musimy zdefiniować funkcję showMessage() w pliku app.component.ts. Tutaj użyjemy zwykłej manipulacji DOM, aby uzyskać div poprzez wybranie go za pomocą jego id z hello. Następnie zastosujemy funkcję innerHTML, aby wstawić komponent app-hello-world w taki sposób:

export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}

Możesz przejść do swojej przeglądarki i kliknąć przycisk, ale już teraz powiem Ci, że nic się nie stanie. Jeśli jednak przejdziesz do narzędzi dev przeglądarki i zajrzysz tam, zobaczysz, że komponent HelloWorld został wstawiony.

Powodem, dla którego nie widzimy komponentu na ekranie, jest to, że Angular nie może rozpoznać znacznika app-hello-world, ponieważ został on wstawiony do szablonu dynamicznie. Angular potrzebuje, aby wszystkie elementy były obecne w szablonie, lub musisz użyć dynamicznej fabryki komponentów, aby zainicjować komponent w czasie rzeczywistym poprzez swój kod.

To jest miejsce, w którym Angular Elements wchodzi do gry. Używając Angular Element, wszystko co musimy zrobić to dynamicznie wstawić tag, a Angular sam zainicjuje komponent za nas. Zobaczmy w końcu jak wykorzystać ten komponent w naszej aplikacji. Po pierwsze, użyj polecenia ng add aby zainstalować Angular Elements w naszej aplikacji:

$ ng add @angular/elements

Jak już to zainstalujesz, przejdź do app.module.ts i dokonaj następujących zmian w @NgModule:

import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap: 
})

Następnie w klasie AppModule napisz funkcję constructor utwórz nową instancję createCustomElement i przekaż jej HelloWorldComponent, jak pokazano poniżej:

export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}

Wraz z komponentem musimy również przekazać mu injector. injector jest czymś, czego używamy do rozwiązywania zależności. Dzięki temu utworzyliśmy instancję HelloWorldComponent jako element niestandardowy. Możemy następnie użyć API customElements do zdefiniowania tagu komponentu jako app-hello-world.

customElements.define('app-hello-world', custom);

Wróć do pliku hello-world.component.ts i usuń/komentuj selector wewnątrz sekcji @Component. W ten sposób Angular nie będzie zdezorientowany i będzie wiedział, aby użyć niestandardowego elementu, który właśnie stworzyliśmy.

Ponownie uruchom polecenie ng serve --open, aby upewnić się, że Angular przyjmuje wszystkie zmiany, które właśnie wprowadziliśmy.

Istnieje duża szansa, że przycisk nadal nie wyświetla HelloWorldComponent. Może to być spowodowane tym, że Angular „fails to construct the HTMLElement”. Aby rozwiązać ten problem, zainstaluj webcomponentjs polyfills:

$ yarn add @webcomponents/webcomponentsjs

Potem przejdź do pliku polyfills.ts i zaimportuj następujące elementy:

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

Wreszcie! Nasz niestandardowy element zostanie wyświetlony na ekranie po kliknięciu tego przycisku.

.