Angular elemek használata – Miért és hogyan? – 1. rész

Kezdés

Kezdjük azzal, hogy létrehozunk egy új Angular projektet a rendszerünkben. Ehhez győződjünk meg róla, hogy telepítve van az Angular CLI legújabb verziója. Futtassuk a következő parancsot a terminálban:

$ npm install -g @angular/cli

A telepítés befejezése után létrehozhatunk vele egy új kezdeti alkalmazást a rendszerünkben, így:

$ ng new angular-app

Ezután megkérdezzük, hogy milyen további funkciókat szeretnénk hozzáadni az Angular projektünkhöz, olyan dolgokat, mint az útválasztás és a stíluslap formátumának típusa. Válassza ki az alapértelmezett választ a Enter/Return billentyű lenyomásával.

A CLI telepíti a szükséges Angular csomagokat és függőségeket a angular-app nevű mappába. Ezt az alkalmazást a következő parancsok futtatásával szolgálhatjuk ki a böngészőnek:

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

Amint látjuk, az alkalmazás már tartalmaz néhány dolgot, amit megjeleníthetünk a képernyőn. De nincs rájuk szükségünk. Tehát menj vissza a kódszerkesztődbe (én ❤️ VS Code), és törölj ki mindent a src/app/app.component.html fájlon belül, és írj egyetlen <h1> elemet.

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

Ha megnézed a fájlszerkezetet, látni fogod, hogy az angularban minden komponens rengeteg fájlból áll. Csak a App komponenshez van egy .ts, .html, .css és egy spec.ts fájl, amely a teszteket tartalmazza, valamint egy module.ts fájl. Lesz még egy opcionális routing.module.ts fájl is, ha úgy döntöttünk, hogy a CLI segítségével történő létrehozás során hozzáadjuk az alkalmazáshoz az útválasztási funkciót.

Ahelyett, hogy mindezeket a fájlokat megírnánk a komponenseinkhez, az Angular CLI ad nekünk egy rövidített módszert, amely ezeket a fájlokat generálja helyettünk. Használjuk ezt a módszert egy HelloWorld komponens létrehozására a rendszerünkben.

$ ng g c HelloWorld

Ez az egyetlen parancs létrehoz egy hello-world nevű mappát a app mappán belül. Ha megnyitjuk ezt a fájlt, akkor ezt a 4 fájlt találjuk benne:

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

Mi csak a .html és .ts fájlt fogjuk használni. Vannak további zászlók, amelyeket átadhatunk a ng g c parancsnak. De annak érdekében, hogy a dolgok egyszerűek és lényegre törők legyenek, nem fogom őket használni. Nézd meg az Angular Docs-t, hogy többet tudj meg a parancs használatáról.

A hello-world.component.ts fájlban látni fogod, hogy a selector a app-hello-world-ra van állítva. Tehát, ha ezt hozzáadjuk a app.component.html-hez így:

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

Az hello-world.component.html tartalma fog megjelenni a böngészőben.

A kezdeti beállításunk most már készen van. Kezdjünk hozzá, hogyan használjuk az Angular elemeket.

Egy komponens átalakítása egyéni elemmé

Jelenleg van egy egyszerű HelloWorld komponensünk, amely egyszerűen kiír néhány szöveget a képernyőre. Nézzük meg, hogyan tudjuk ezt a komponenst dinamikusabban beilleszteni az alkalmazásba. Ehhez cseréljük le a app-hello-world-at egy div-ra és egy button-re. Adjuk hozzá a click hallgatót is a button-hez, hogy amikor valaki rákattint a gombra, megjelenhessen a HelloWorld komponens. Ezt egy showMessage() függvény fogja kezelni. Menjünk tehát a app.component.html oldalra, és végezzük el a következő módosításokat:

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

Ezután meg kell határoznunk a showMessage() függvényt a app.component.ts fájlban. Itt a szokásos DOM-manipulációt fogjuk használni a div kiválasztásával a hello id segítségével. Ezután a innerHTML függvényt fogjuk alkalmazni a app-hello-world komponens beillesztésére, így:

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

Mehetsz a böngésződbe, és rákattinthatsz a gombra, de már most megmondom, hogy semmi sem fog történni. De viszont, ha elmész a böngésző fejlesztői eszközeibe, és ott megnézed, látni fogod, hogy a HelloWorld komponens be van illesztve.

Azért nem látjuk a képernyőn a komponenst, mert az Angular nem ismeri fel a app-hello-world taget, mivel az dinamikusan került be a sablonba. Az Angularnak szüksége van arra, hogy az összes elem jelen legyen a sablonban, vagy a dinamikus komponensgyárat kell használnunk, hogy futásidőben a kódunkon keresztül instanciáljuk a komponenst.

Ez az a pont, ahol az Angular Elements a képbe kerül. Az Angular Element használatával csak annyit kell tennünk, hogy dinamikusan beillesztjük a taget, és maga az Angular fogja instanciálni helyettünk a komponenst. Nézzük meg végre, hogyan használhatjuk ezt a komponenst az alkalmazásunkban. Először is a ng add paranccsal telepítsük az Angular Elements-et az alkalmazásunkba:

$ ng add @angular/elements

Amikor ezt telepítettük, menjünk a app.module.ts-be, és végezzük el a következő módosításokat a @NgModule-ban:

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

Ezután a AppModule osztályban írjunk egy constructor függvényt, amely létrehoz egy új példányt a createCustomElement-ból, és adjuk át neki a HelloWorldComponent-t az alábbiak szerint:

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

A komponenssel együtt át kell adnunk neki a injector-t is. A injector olyasmi, amit a függőségek feloldására használunk. Ezzel létrehoztuk a HelloWorldComponent egy példányát, mint egyéni elemet. Ezután használhatjuk a customElements API-t, hogy a komponens címkéjét app-hello-world-ként definiáljuk.

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

Menjünk vissza a hello-world.component.ts fájlba, és távolítsuk el/jegyezzük be a selector-t a @Component szakaszon belül. Így az Angular nem fog összezavarodni, és tudni fogja használni az általunk most létrehozott egyéni elemet.

Futtassuk újra a ng serve --open parancsot, hogy megbizonyosodjunk arról, hogy az Angular átveszi az összes módosítást, amit most csináltunk.

Nagy esély van arra, hogy a gomb még mindig nem jeleníti meg a HelloWorldComponent-et. Ennek oka lehet, hogy az Angular “nem tudja felépíteni a HTMLElementet”. A probléma megoldásához telepítse a webcomponentjs polyfilleket:

$ yarn add @webcomponents/webcomponentsjs

Ezután menjen a polyfills.ts fájlba, és importálja a következőket:

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

Végre! Az egyéni elemünk megjelenik a képernyőn, amikor rákattintunk a gombra.