Användning av Angular Elements – Varför och hur – Del 1
För att komma igång
Låt oss börja med att skapa ett nytt Angular-projekt i vårt system. För detta måste du se till att du har den senaste versionen av Angular CLI installerad. Kör följande kommando i din terminal:
$ npm install -g @angular/cli
När denna installation är klar kan vi använda den för att skapa en ny initial applikation i vårt system så här:
$ ng new angular-app
Du kommer sedan att bli ombedd att välja ytterligare funktioner som du kanske vill lägga till i ditt Angular-projekt, saker som routning och typ av format för formatet för formatet för formatet av formatblad. Välj standardsvaret genom att trycka på Enter/Return-tangenten.
CLI installerar de nödvändiga Angular-paketen och beroendena i en mapp som heter angular-app. Du kan servera den här applikationen i webbläsaren genom att köra följande kommandon:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Som du kan se innehåller appen redan några saker som vi kan visa på skärmen. Men vi behöver dem inte. Så gå tillbaka till din kodredigerare (jag ❤️ VS Code) och ta bort allt inuti src/app/app.component.html-filen och skriv ett enda <h1>-element.
<h1>Welcome To Angular Elements!</h1>
Om du tar en titt på filstrukturen ser du att varje komponent i angular består av en mängd filer. Bara för App-komponenten finns det en .ts, .html, .css och en spec.ts-fil som innehåller testerna samt en module.ts-fil. Det kommer också att finnas en valfri routing.module.ts-fil om du hade valt att lägga till routing-funktionen till programmet när du skapade det med hjälp av CLI.
Istället för att skriva alla dessa filer för våra komponenter ger Angular CLI oss en kortfattad metod som genererar dessa filer åt oss. Låt oss använda den här metoden för att skapa en HelloWorld-komponent i vårt system.
$ ng g c HelloWorld
Detta enda kommando kommer att skapa en mapp med namnet hello-world inuti mappen app. Om du öppnar den här mappen kommer du att hitta dessa fyra filer inuti den:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Vi kommer bara att använda .html och .ts filen. Det finns ytterligare flaggor som vi kan skicka till kommandot ng g c. Men för att hålla saker och ting enkla och till punkt kommer jag inte att använda dem. Kolla Angular Docs om du vill veta mer om hur du använder det här kommandot.
Inom hello-world.component.ts-filen ser du att selector är inställd på app-hello-world. Så om du lägger till detta i app.component.html så här:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Då kommer innehållet i hello-world.component.html att visas i webbläsaren.
Vår första installation är nu klar. Låt oss börja med hur vi använder Angular Elements.
Konvertera en komponent till ett anpassat element
Redan nu har vi en enkel HelloWorld-komponent som helt enkelt skriver ut lite text på skärmen. Låt oss ta en titt på hur vi kan infoga den här komponenten i appen på ett mer dynamiskt sätt. För att göra detta ersätter vi app-hello-world med en div och en button. Låt oss också lägga till click-lyssnaren till button, så att när någon klickar på knappen kan HelloWorld-komponenten visas. Detta kommer att hanteras av en showMessage()-funktion. Så gå till app.component.html-sidan och gör dessa ändringar:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Vi måste sedan definiera showMessage()-funktionen i app.component.ts-filen. Här kommer vi att använda vanlig DOM-manipulation för att få fram div genom att välja den med hjälp av dess id av hello. Sedan tillämpar vi innerHTML-funktionen för att infoga app-hello-world-komponenten så här:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Du kan gå till din webbläsare och klicka på knappen, men jag ska säga dig med en gång att ingenting kommer att hända. Men å andra sidan, om du går till webbläsarens dev-verktyg och tittar där kommer du att se att HelloWorld-komponenten är infogad.
Anledningen till att vi inte kan se komponenten på skärmen är att Angular inte kan känna igen app-hello-world-taggen eftersom den har infogats dynamiskt i mallen. Angular behöver att alla element finns i mallen, annars måste du använda den dynamiska komponentfabriken för att instantiera komponenten vid körning genom din kod.
Det är här Angular Elements kommer in i bilden. Genom att använda Angular Element behöver vi bara infoga taggen dynamiskt och Angular själv instansierar komponenten åt oss. Låt oss äntligen få se hur vi kan använda den här komponenten i vår app. Använd först kommandot ng add för att installera Angular Elements i vår app:
$ ng add @angular/elements
När du har detta installerat går du till app.module.ts och gör följande ändringar i @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Sedan i AppModule-klassen skriver du en constructor-funktion som skapar en ny instans av createCustomElement och skickar över HelloWorldComponent som visas nedan:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Länge med komponenten måste vi också skicka över injector till den. injector är något som vi använder för att lösa beroenden. Med det har vi skapat en instans av HelloWorldComponent som ett anpassat element. Vi kan sedan använda customElements API:et för att definiera komponentens tagg som app-hello-world.
customElements.define('app-hello-world', custom);
Gå tillbaka till hello-world.component.ts-filen och ta bort/kommentera selector inne i @Component-avsnittet. På så sätt blir Angular inte förvirrad och vet att det ska använda det anpassade elementet som vi just har skapat.
Kör om ng serve --open-kommandot för att försäkra dig om att Angular tar till sig alla ändringar som vi just har gjort.
Det finns en stor chans att knappen fortfarande inte visar HelloWorldComponent. Detta kan bero på att Angular ”misslyckas med att konstruera HTMLElementet”. För att lösa detta problem installerar du webcomponentjs polyfills:
$ yarn add @webcomponents/webcomponentsjs
Därefter går du till polyfills.ts-filen och importerar följande:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Äntligen! Vårt anpassade element kommer att visas på skärmen när vi klickar på knappen.
