Hoe en waarom Angular elementen gebruiken – deel 1
Aan de slag
Laten we beginnen met het aanmaken van een nieuw Angular Project in ons systeem. Zorg er voor dat u de laatste versie van Angular CLI heeft geïnstalleerd. Voer het volgende commando uit in uw terminal:
$ npm install -g @angular/cli
Als deze installatie is voltooid, kunnen we het gebruiken om een nieuwe initiële toepassing in ons systeem te maken zoals dit:
$ ng new angular-app
U wordt dan gevraagd om de extra functies te selecteren die u wilt toevoegen aan uw Angular-project, dingen zoals routing en het type stylesheet-formaat. Selecteer het standaard antwoord door op de Enter/Return toets te drukken.
De CLI installeert de benodigde Angular packages en dependencies in een map genaamd angular-app. U kunt deze applicatie aan de browser serveren door de volgende commando’s uit te voeren:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Zoals u ziet, bevat de app al een aantal dingen die we op het scherm kunnen weergeven. Maar we hebben ze niet nodig. Dus ga terug naar je code editor (ik ❤️ VS Code) en verwijder alles binnen src/app/app.component.html bestand en schrijf een enkel <h1> element.
<h1>Welcome To Angular Elements!</h1>
Als je de bestandsstructuur bekijkt, zul je zien dat elk component in angular bestaat uit een veelvoud van bestanden. Voor de App component alleen al, is er een .ts, .html, .css, en een spec.ts bestand dat de tests bevat, en een module.ts bestand. Er zal ook een optionele routing.module.ts bestand zijn als je ervoor had gekozen om de routing functie toe te voegen aan de applicatie tijdens het maken met behulp van de CLI.
In plaats van het schrijven van al deze bestanden voor onze componenten, Angular CLI geeft ons een stenografische methode die deze bestanden voor ons zal genereren. Laten we deze methode gebruiken om een HelloWorld component in ons systeem te maken.
$ ng g c HelloWorld
Dit enkele commando zal een map aanmaken met de naam hello-world in de app map. Als u dit bestand opent, vindt u deze 4 bestanden erin:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
We zullen alleen de .html en .ts bestanden gaan gebruiken. Er zijn extra vlaggen die we kunnen doorgeven aan het ng g c commando. Maar om het eenvoudig en to point te houden, zal ik ze niet gebruiken. Kijk in de Angular Docs om meer te weten te komen over het gebruik van dit commando.
In het hello-world.component.ts bestand, zult u zien dat de selector is ingesteld op app-hello-world. Dus, als u dit toevoegt aan de app.component.html zoals dit:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Dan zal de inhoud van hello-world.component.html worden weergegeven in de browser.
Onze initiële setup is nu klaar. Laten we aan de slag gaan met het gebruik van Angular Elements.
Convert A Component into Custom Element
Op dit moment hebben we een eenvoudig HelloWorld-component dat simpelweg wat tekst op het scherm afdrukt. Laten we eens kijken hoe we dit component op een meer dynamische manier in de app kunnen invoegen. Om dit te doen, vervangen we de app-hello-world door een div en een button. Laten we ook de click listener aan de button toevoegen, zodat wanneer iemand op de knop klikt, de HelloWorld component kan worden getoond. Dit zal worden afgehandeld door een showMessage() functie. Dus ga naar de app.component.html pagina en breng de volgende wijzigingen aan:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
We moeten dan de showMessage() functie definiëren in het app.component.ts bestand. Hier zullen we gewone DOM manipulatie gebruiken om de div te krijgen door het te selecteren met behulp van zijn id of hello. Daarna gebruiken we de innerHTML functie om de app-hello-world component in te voegen:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
U kunt naar uw browser gaan en op de knop klikken, maar ik kan u nu al vertellen dat er niets zal gebeuren. Maar als je dan naar de dev tools van de browser gaat en daar kijkt, zul je zien dat het HelloWorld component is ingevoegd.
De reden waarom we het component niet op het scherm kunnen zien, is dat Angular de app-hello-world tag niet kan herkennen omdat deze dynamisch in het template is ingevoegd. Angular heeft alle elementen nodig die in het sjabloon aanwezig zijn, of je moet de dynamische componentfabriek gebruiken om het component runtime te instantiëren via je code.
Dit is waar Angular Elements om de hoek komt kijken. Door Angular Element te gebruiken, hoeven we alleen maar de tag dynamisch in te voegen, en Angular zelf zal de component voor ons instantiëren. Laten we eindelijk eens kijken hoe we dit component in onze app kunnen gebruiken. Gebruik eerst het ng add commando om Angular Elements in onze app te installeren:
$ ng add @angular/elements
Zodra je dit hebt geïnstalleerd, ga je naar app.module.ts en maak je de volgende veranderingen in de @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Toen in de AppModule klasse, schrijf een constructor functie maak een nieuwe instantie van de createCustomElement en geef het de HelloWorldComponent door zoals hieronder getoond:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Met de component, moeten we het ook de injector doorgeven. De injector is iets dat we gebruiken om de afhankelijkheden op te lossen. Daarmee hebben we een instantie van de HelloWorldComponent als een aangepast element gemaakt. Vervolgens kunnen we de customElements API gebruiken om de tag van het component te definiëren als app-hello-world.
customElements.define('app-hello-world', custom);
Ga terug naar het hello-world.component.ts bestand en verwijder/commentarieer de selector binnen de @Component sectie. Op deze manier raakt Angular niet in de war en weet het dat het het aangepaste element moet gebruiken dat we zojuist hebben gemaakt.
Herhaal het ng serve --open commando om er zeker van te zijn dat Angular alle wijzigingen meeneemt die we zojuist hebben aangebracht.
Er is een goede kans dat de knop nog steeds niet de HelloWorldComponent weergeeft. Dit kan komen doordat Angular “er niet in slaagt het HTMLElement te construeren”. Om dit probleem op te lossen, installeer de webcomponentjs polyfills:
$ yarn add @webcomponents/webcomponentsjs
Dan, ga naar het polyfills.ts bestand en importeer het volgende:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Financieel! Ons aangepaste element zal op het scherm verschijnen als we op die knop klikken.
