Utilizarea elementelor Angular – De ce și cum? – Partea 1

Începem

Să începem prin a crea un nou proiect Angular în sistemul nostru. Pentru aceasta, asigurați-vă că aveți instalată cea mai recentă versiune de Angular CLI. Rulați următoarea comandă în terminalul dvs.:

$ npm install -g @angular/cli

După ce această instalare este completă, o putem folosi pentru a crea o nouă aplicație inițială în sistemul nostru, astfel:

$ ng new angular-app

Apoi vi se va cere să selectați caracteristicile suplimentare pe care doriți să le adăugați la proiectul dvs. Angular, lucruri precum rutarea și tipul de format al foii de stil. Selectați răspunsul implicit apăsând tasta Enter/Return.

CLI-ul instalează pachetele și dependențele Angular necesare într-un dosar numit angular-app. Puteți servi această aplicație pe browser executând următoarele comenzi:

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

După cum puteți vedea, aplicația conține deja câteva lucruri pe care le putem afișa pe ecran. Dar nu avem nevoie de ele. Așa că întoarceți-vă la editorul de cod (eu ❤️ VS Code) și ștergeți tot ce se află în interiorul fișierului src/app/app.component.html și scrieți un singur element <h1>.

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

Dacă aruncați o privire la structura fișierelor, veți vedea că fiecare componentă din angular este formată dintr-o multitudine de fișiere. Numai pentru componenta App, există un fișier .ts, .html, .css, și un fișier spec.ts care conține testele, precum și un fișier module.ts. Va exista, de asemenea, un fișier opțional routing.module.ts dacă ați ales să adăugați caracteristica de rutare la aplicație în timp ce o creați folosind CLI.

În loc să scriem toate aceste fișiere pentru componentele noastre, Angular CLI ne oferă o metodă prescurtată care va genera aceste fișiere pentru noi. Să folosim această metodă pentru a crea o componentă HelloWorld în sistemul nostru.

$ ng g c HelloWorld

Acestă singură comandă va crea un dosar numit hello-world în interiorul dosarului app. Dacă deschideți acest dosar, veți găsi aceste 4 fișiere în interiorul lui:

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

Noi vom folosi doar fișierele .html și .ts. Există stegulețe suplimentare pe care le putem trece la comanda ng g c. Dar, pentru a păstra lucrurile simple și la obiect, nu le voi folosi. Consultați Angular Docs pentru a afla mai multe despre cum să folosiți această comandă.

În interiorul fișierului hello-world.component.ts, veți vedea că selector este setat la app-hello-world. Deci, dacă adăugați acest lucru la app.component.html astfel:

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

Atunci conținutul din hello-world.component.html va fi afișat în browser.

Configurarea noastră inițială este acum gata. Să începem cu modul de utilizare a elementelor Angular Elements.

Convert A Component Into Custom Element

În acest moment, avem o componentă simplă HelloWorld care imprimă pur și simplu un text pe ecran. Să aruncăm o privire la modul în care putem insera această componentă în aplicație într-un mod mai dinamic. Pentru a face acest lucru, să înlocuim app-hello-world cu un div și un button. Să adăugăm, de asemenea, ascultătorul click la button, astfel încât, atunci când cineva face clic pe buton, să poată fi afișată componenta HelloWorld. Acest lucru va fi gestionat de o funcție showMessage(). Așadar, mergeți la pagina app.component.html și faceți aceste modificări:

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

Apoi trebuie să definim funcția showMessage() în fișierul app.component.ts. Aici vom folosi manipularea obișnuită a DOM pentru a obține div prin selectarea acestuia folosind id din hello. Apoi, vom aplica funcția innerHTML pentru a insera componenta app-hello-world astfel:

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

Puteți merge în browserul dvs. și face clic pe buton, dar vă spun de pe acum că nu se va întâmpla nimic. Dar, din nou, dacă mergeți la dev tools din browser și vă uitați acolo, veți vedea că este inserată componenta HelloWorld.

Motivul pentru care nu putem vedea componenta pe ecran este că Angular nu poate recunoaște tag-ul app-hello-world deoarece a fost inserat în șablon în mod dinamic. Angular are nevoie ca toate elementele să fie prezente în șablon sau trebuie să folosiți fabrica de componente dinamice pentru a instanția componenta în timpul execuției prin intermediul codului dumneavoastră.

Aici intră în joc Angular Elements. Utilizând Angular Element, tot ce trebuie să facem este să inserăm tag-ul în mod dinamic, iar Angular însuși va instanția componenta pentru noi. Să vedem, în sfârșit, cum să folosim această componentă în aplicația noastră. În primul rând, utilizați comanda ng add pentru a instala Angular Elements în aplicația noastră:

$ ng add @angular/elements

După ce ați instalat acest lucru, mergeți la app.module.ts și faceți următoarele modificări la @NgModule:

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

Apoi, în clasa AppModule, scrieți o funcție constructor creați o nouă instanță a createCustomElement și treceți-i HelloWorldComponent așa cum se arată mai jos:

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

Împreună cu componenta, trebuie să-i transmitem și injector. injector este un element pe care îl folosim pentru a rezolva dependențele. Odată cu aceasta, am creat o instanță a HelloWorldComponent ca element personalizat. Putem folosi apoi API-ul customElements pentru a defini tag-ul componentei ca fiind app-hello-world.

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

Întoarceți-vă la fișierul hello-world.component.ts și eliminați/comentați selector din interiorul secțiunii @Component. În acest fel, Angular nu se va confunda și va ști să folosească elementul personalizat pe care tocmai l-am creat.

Rexecutați comanda ng serve --open pentru a vă asigura că Angular preia toate modificările pe care tocmai le-am făcut.

Există o mare probabilitate ca butonul să nu afișeze în continuare HelloWorldComponent. Acest lucru se poate datora faptului că Angular „nu reușește să construiască HTMLElementul”. Pentru a rezolva această problemă, instalați polyfills webcomponentjs:

$ yarn add @webcomponents/webcomponentsjs

Apoi, mergeți la fișierul polyfills.ts și importați următoarele:

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

În sfârșit! Elementul nostru personalizat va fi afișat pe ecran atunci când vom face clic pe acel buton.

.