Anvendelse af Angular-elementer – Hvorfor og hvordan – Del 1
Kom i gang
Lad os starte med at oprette et nyt Angular-projekt i vores system. For dette skal du sørge for, at du har den nyeste version af Angular CLI installeret. Kør følgende kommando i din terminal:
$ npm install -g @angular/cli
Når denne installation er færdig, kan vi bruge den til at oprette en ny indledende applikation i vores system på denne måde:
$ ng new angular-app
Du vil derefter blive bedt om at vælge de yderligere funktioner, som du eventuelt ønsker at tilføje til dit Angular-projekt, ting som routing og typen af stylesheet-format. Vælg standardsvaret ved at trykke på tasten Enter/Return.
CLI’en installerer de nødvendige Angular-pakker og -afhængigheder i en mappe kaldet angular-app. Du kan servere denne applikation på browseren ved at køre følgende kommandoer:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Som du kan se, indeholder app’en allerede et par ting, som vi kan vise på skærmen. Men vi har ikke brug for dem. Så gå tilbage til din kodeeditor (jeg ❤️ VS Code) og slet alt inde i src/app/app.component.html-filen og skriv et enkelt <h1>-element.
<h1>Welcome To Angular Elements!</h1>
Hvis du kigger på filstrukturen, vil du se, at hver komponent i angular består af et væld af filer. Alene for App-komponenten er der en .ts, .html, .css og en spec.ts-fil, der indeholder testene, samt en module.ts-fil. Der vil også være en valgfri routing.module.ts-fil, hvis du havde valgt at tilføje routing-funktionen til applikationen, mens du oprettede den ved hjælp af CLI.
I stedet for at skrive alle disse filer for vores komponenter giver Angular CLI os en kortfattet metode, der genererer disse filer for os. Lad os bruge denne metode til at oprette en HelloWorld-komponent i vores system.
$ ng g c HelloWorld
Denne enkelte kommando vil oprette en mappe ved navn hello-world inde i app-mappen. Hvis du åbner denne mappe, vil du finde disse 4 filer inde i den:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Vi vil kun bruge .html og .ts filen. Der er yderligere flag, som vi kan videregive til ng g c-kommandoen. Men for at holde tingene enkle og til punkt og prikke, vil jeg ikke bruge dem. Tjek Angular Docs for at få mere at vide om, hvordan du bruger denne kommando.
Inden for hello-world.component.ts-filen kan du se, at selector er indstillet til app-hello-world. Så hvis du tilføjer dette til app.component.html på denne måde:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Så vil indholdet af hello-world.component.html blive vist i browseren.
Vores første opsætning er nu klar. Lad os komme i gang med at se, hvordan vi bruger Angular Elements.
Konverter en komponent til et brugerdefineret element
Ret nu har vi en simpel HelloWorld-komponent, der blot udskriver noget tekst på skærmen. Lad os se på, hvordan vi kan indsætte denne komponent i appen på en mere dynamisk måde. For at gøre dette skal vi erstatte app-hello-world med en div og en button. Lad os også tilføje click-lytteren til button, så når nogen klikker på knappen, kan HelloWorld-komponenten blive vist. Dette vil blive håndteret af en showMessage()-funktion. Gå derfor til app.component.html-siden, og lav disse ændringer:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Vi skal derefter definere showMessage()-funktionen i app.component.ts-filen. Her skal vi bruge almindelig DOM-manipulation for at få fat i div ved at vælge den ved hjælp af dens id af hello. Derefter anvender vi innerHTML-funktionen til at indsætte app-hello-world-komponenten på denne måde:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Du kan gå ind i din browser og klikke på knappen, men jeg vil med det samme fortælle dig, at der ikke sker noget. Men igen, hvis du går til browserens dev-værktøjer og kigger der, vil du se, at HelloWorld-komponenten er indsat.
Grunden til, at vi ikke kan se komponenten på skærmen, er, at Angular ikke kan genkende app-hello-world-tagget, da det er blevet indsat dynamisk i skabelonen. Angular har brug for, at alle elementer er til stede i skabelonen, ellers skal du bruge den dynamiske komponentfabrik til at instantiere komponenten på køretid via din kode.
Det er her, Angular Elements kommer ind i billedet. Ved at bruge Angular Element skal vi blot indsætte tagget dynamisk, og Angular selv vil instantiere komponenten for os. Lad os endelig komme til at se, hvordan vi kan bruge denne komponent i vores app. Først skal du bruge kommandoen ng add til at installere Angular Elements i vores app:
$ ng add @angular/elements
Når du har installeret dette, skal du gå til app.module.ts og foretage følgende ændringer i @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Så skal du i AppModule-klassen skrive en constructor-funktion oprette en ny instans af createCustomElement og videregive den HelloWorldComponent som vist nedenfor:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Langt med komponenten skal vi også videregive den injector. injector er noget, som vi bruger til at opløse afhængighederne. Dermed har vi oprettet en instans af HelloWorldComponent som et brugerdefineret element. Vi kan derefter bruge customElements API’et til at definere komponentens tag som app-hello-world.
customElements.define('app-hello-world', custom);
Gå tilbage til hello-world.component.ts-filen, og fjern/kommenter selector inde i @Component-delen. På den måde bliver Angular ikke forvirret og ved, at den skal bruge det brugerdefinerede element, som vi lige har oprettet.
Gentag kommandoen ng serve --open igen for at sikre, at Angular tager alle de ændringer, som vi lige har foretaget.
Der er en god chance for, at knappen stadig ikke viser HelloWorldComponent. Det kan skyldes, at Angular “ikke kan konstruere HTMLElementet”. For at løse dette problem skal du installere webcomponentjs polyfills:
$ yarn add @webcomponents/webcomponentsjs
Dernæst skal du gå til polyfills.ts-filen og importere følgende:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Endeligt! Vores brugerdefinerede element vil blive vist på skærmen, når vi klikker på denne knap.
