Verwendung von Angular-Elementen – Warum und wie? – Teil 1

Wie Sie sehen können, enthält die App bereits einige Dinge, die wir auf dem Bildschirm anzeigen können. Aber wir brauchen sie nicht. Also geh zurück zu deinem Code-Editor (ich ❤️ VS Code) und lösche alles in der src/app/app.component.html-Datei und schreibe ein einziges <h1>-Element.

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

Wenn du dir die Dateistruktur ansiehst, wirst du sehen, dass jede Komponente in Angular aus einer Vielzahl von Dateien besteht. Allein für die App-Komponente gibt es eine .ts-, .html-, .css– und eine spec.ts-Datei, die die Tests enthält, sowie eine module.ts-Datei. Außerdem gibt es eine optionale routing.module.ts-Datei, wenn Sie bei der Erstellung der Anwendung mit der CLI das Routing-Feature hinzugefügt haben.

Anstatt all diese Dateien für unsere Komponenten zu schreiben, gibt uns Angular CLI eine Kurzmethode, die diese Dateien für uns generiert. Verwenden wir diese Methode, um eine HelloWorld-Komponente in unserem System zu erstellen.

$ ng g c HelloWorld

Dieser einzelne Befehl erstellt einen Ordner namens hello-world innerhalb des Ordners app. Wenn Sie diese Datei öffnen, finden Sie darin diese 4 Dateien:

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

Wir werden nur die .html und .ts Datei verwenden. Es gibt zusätzliche Flags, die wir an den Befehl ng g c übergeben können. Aber um die Dinge einfach und auf den Punkt zu bringen, werde ich sie nicht verwenden. Schauen Sie in den Angular Docs nach, um mehr über die Verwendung dieses Befehls zu erfahren.

In der Datei hello-world.component.ts sehen Sie, dass selector auf app-hello-world gesetzt ist. Wenn Sie dies also wie folgt zu app.component.html hinzufügen:

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

Dann wird der Inhalt von hello-world.component.html im Browser angezeigt.

Unsere anfängliche Einrichtung ist nun fertig. Beginnen wir mit der Verwendung von Angular-Elementen.

Eine Komponente in ein benutzerdefiniertes Element umwandeln

Im Moment haben wir eine einfache HelloWorld-Komponente, die einfach einen Text auf dem Bildschirm ausgibt. Schauen wir uns an, wie wir diese Komponente auf dynamischere Weise in die Anwendung einfügen können. Zu diesem Zweck ersetzen wir die app-hello-world durch eine div und eine button. Fügen wir außerdem den click-Listener zum button hinzu, so dass die HelloWorld-Komponente angezeigt werden kann, wenn jemand auf die Schaltfläche klickt. Dies wird über eine showMessage()-Funktion abgewickelt. Gehen Sie also zur Seite app.component.html und nehmen Sie diese Änderungen vor:

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

Dann müssen wir die Funktion showMessage() in der Datei app.component.ts definieren. Hier verwenden wir die reguläre DOM-Manipulation, um die div zu erhalten, indem wir sie über ihre id von hello auswählen. Dann wenden wir die Funktion innerHTML an, um die Komponente app-hello-world wie folgt einzufügen:

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

Sie können in Ihrem Browser auf die Schaltfläche klicken, aber ich sage Ihnen gleich, dass nichts passieren wird. Aber wenn du in den Entwicklungswerkzeugen des Browsers nachschaust, wirst du sehen, dass die HelloWorld-Komponente eingefügt ist.

Der Grund, warum wir die Komponente nicht auf dem Bildschirm sehen können, ist, dass Angular das app-hello-world-Tag nicht erkennen kann, da es dynamisch in die Vorlage eingefügt wurde. Angular benötigt alle Elemente im Template, oder man muss die dynamische Komponentenfabrik verwenden, um die Komponente zur Laufzeit durch den Code zu instanziieren.

Hier kommt Angular Elements ins Spiel. Durch die Verwendung von Angular Elements müssen wir nur das Tag dynamisch einfügen, und Angular selbst wird die Komponente für uns instanziieren. Sehen wir uns nun an, wie wir diese Komponente in unserer App verwenden können. Verwenden Sie zunächst den Befehl ng add, um Angular Elements in unserer App zu installieren:

$ ng add @angular/elements

Wenn Sie dies installiert haben, gehen Sie zu app.module.ts und nehmen Sie die folgenden Änderungen an der @NgModule vor:

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

Schreiben Sie dann in der Klasse AppModule eine constructor-Funktion, die eine neue Instanz von createCustomElement erstellt und ihr die HelloWorldComponent wie unten gezeigt übergibt:

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

Zusammen mit der Komponente müssen wir ihr auch die injector übergeben. Die injector ist etwas, das wir verwenden, um die Abhängigkeiten aufzulösen. Damit haben wir eine Instanz des HelloWorldComponent als benutzerdefiniertes Element erstellt. Wir können dann die customElements-API verwenden, um das Tag der Komponente als app-hello-world zu definieren.

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

Gehen Sie zurück zur hello-world.component.ts-Datei und entfernen/kommentieren Sie das selector innerhalb des @Component-Abschnitts. Auf diese Weise wird Angular nicht verwirrt und weiß, dass es das benutzerdefinierte Element verwenden soll, das wir gerade erstellt haben.

Führen Sie den Befehl ng serve --open erneut aus, um sicherzustellen, dass Angular alle Änderungen übernimmt, die wir gerade vorgenommen haben.

Es besteht eine gute Chance, dass die Schaltfläche immer noch nicht das HelloWorldComponent anzeigt. Das kann daran liegen, dass Angular „das HTMLElement nicht konstruieren kann“. Um dieses Problem zu lösen, installieren Sie die webcomponentjs-Polyfills:

$ yarn add @webcomponents/webcomponentsjs

Gehen Sie dann zur polyfills.ts-Datei und importieren Sie Folgendes:

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

Endlich! Unser benutzerdefiniertes Element wird auf dem Bildschirm angezeigt, wenn wir auf diese Schaltfläche klicken.