Verwendung von Webkomponenten in einer Angular-Anwendung: Freude und Spaß

Dieses Tutorial ist Teil unserer Web Components Reihe! Wir verwenden die gleiche Webkomponente, die wir für die Serie erstellt haben, und zeigen Ihnen, wie Sie sie in einer Angular-Anwendung verwenden können.

Laut der Angular Website"Wir bauen eine Plattform für die Zukunft." Es gibt einen Angular-Weg, um Applications zu entwickeln, und es hat so ziemlich alles, was Sie brauchen, bereits eingebaut.

Sind Webkomponenten ein Teil dieser Plattform für die Zukunft?

Den Tests zufolge, die von custom-elements-everywhere.comsieht die Zukunft ziemlich rosig aus.

Custom-Elements-Everywhere.com Angular results

Angular besteht alle Tests mit einer Gesamtpunktzahl von 100 %. Das bedeutet, dass die Art und Weise, wie Angular mit Daten und Ereignissen umgeht, vollständig mit Webkomponenten kompatibel ist.

Werfen wir einen Blick auf den Code. Hier ist die Anwendung, die wir bauen werden: Angular Answers. Kennen Sie die Antwort?

Einbindung der Webkomponente in Angular

In den vorangegangenen Beiträgen dieser Serie gab es zwei Möglichkeiten, die Webkomponente einzubinden:

• npm installiert das Paket

• Link zu einem CDN, das das Paket hostet

Mit Angular, nur die Installation des Pakets über npm arbeitete für mich. Wenn jemand eine Idee hat, warum die Verknüpfung mit einem CDN nicht funktioniert hat, lassen Sie es mich bitte wissen. Für jetzt, npm installieren es ist.

npm install @dwane-vonage/dwanes-keypad

Angular auf die Webkomponente aufmerksam machen

Nach der Installation müssen Sie nur noch das Element-Tag der Webkomponente in den app.component.htmleinfügen, richtig?

Wenn Sie das tun, wird möglicherweise eine ähnliche Fehlermeldung wie diese angezeigt:

Template parse error

Angular möchte über alles Bescheid wissen, was in der Anwendung vor sich geht, damit es optimiert und so performant wie möglich ausgeführt werden kann. Wenn es sich nicht um ein Standard-HTML-Element oder eine Angular-Komponente handelt, wird ein Fehler ausgegeben.

"Wir glauben, dass das Schreiben schöner Apps Freude und Spaß machen sollte."

- Eckig

Fehlermeldungen sind weder erfreulich noch lustig, und Angular versucht, den Schmerz mit hilfreichen Meldungen in diesen Fehlern zu lindern. Sie schlagen zwei mögliche Antworten vor, um unser Problem zu beheben. Der zweite Vorschlag ist genau das, was wir haben, und er bietet die Lösung. Das war sowohl erfreulich als auch lustig!

Importieren Sie in der Datei app.module.ts das CUSTOM_ELEMENTS_SCHEMA:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

Dann fügen Sie es in das @NgModule decorator Objekt ein:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Die endgültige Datei sollte in etwa so aussehen:

import { BrowserModule } from "@angular/platform-browser";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Durch diese Änderungen weiß Angular, dass es sich keine Sorgen machen muss, wenn es auf ein Element stößt, mit dem es nicht umzugehen weiß.

Nun platzieren wir in der app.component.html Datei platzieren wir die Tastaturkomponente wie folgt:

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

Wir werden die Teile im Inneren später besprechen, aber jetzt sollten Sie Folgendes beachten #keypad.

In der app.component.tsimportieren wir ElementRef, ViewChild und unsere Webkomponente:

import { Component, ElementRef, ViewChild } from "@angular/core";
import "@dwane-vonage/dwanes-keypad/dwanes-keypad.js";

Der ViewChild Decorator wird verwendet, um die Tastaturkomponente zu finden, indem die #keypad und erstellt eine keypadComponent Referenz der Klasse ElementRef.

@ViewChild("keypad") keypadComponent: ElementRef;

Angular hat nun einen Verweis auf die Webkomponente und kann an Daten und Ereignisse binden. Schauen wir uns das als nächstes an.

Umgang mit Daten

Die Syntax zur Bindung der Daten, die in Ihre Webkomponente eingehen, besteht aus eckigen Klammern []. Bei Eigenschaften sieht das so aus: [property]="data". Bei einem Attribut: [attr.attribute]="data". In der Dokumentation zur Bindungssyntax gibt es einen ganzen Abschnitt über HTML-Attribute und DOM-Eigenschaften.

Wie in den Ergebnissen von custom-elements-everywhere.com erwähnt: "Dies funktioniert gut für umfangreiche Daten, wie Objekte und Arrays, und funktioniert auch gut für primitive Werte, solange der Autor des benutzerdefinierten Elements alle exponierten Attribute den entsprechenden Eigenschaften zugeordnet hat."

Werfen wir einen Blick auf unsere Tastaturkomponente: Unter app.component.html

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

Die Eigenschaften Schlüssel, Platzhalter und actionText sind an Variablen mit dem gleichen Namen gebunden (zur Vereinfachung). cancelText wird auf die Zeichenkette Quit.

Dann, in app.component.tslegen wir die Anfangswerte der Daten für die Eigenschaften/Attribute fest. Beachten Sie, dass es sich bei den Schlüsseldaten um ein Array (reichhaltige Daten) handelt, das an die Eigenschaft übergeben wird, ohne dass etwas Zusätzliches benötigt wird.

title = "CodeSandbox";
keys = ["", "1", "", "", "2", "", "", "3", "", "", "4", ""];
actionText = "submit answer";
placeholder = "Enter your answer.";

Hier ein Beispiel dafür, wie die Daten einer Eigenschaft geändert werden können:

this.placeholder = "🎉 You got it right!";

Handhabung von Ereignissen

Sie haben vielleicht die Klammer () um digits-sent. In app.component.html

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

Dies ist die Syntax, die Angular verwendet, um an Ereignisse zu binden, die von dem Element kommen. Sie sagt Angular, dass es die Daten, die von der Tastaturkomponente kommen, an das digits-sent Ereignis der Tastaturkomponente an unsere answerSubmitted Funktion weiterzuleiten, die unten zu sehen ist: In app.component.ts

answerSubmitted(event) {
  console.log("event", event);
  this.keypadComponent.nativeElement.cancelAction();
  if (event.detail.digits) {
    if (event.detail.digits === this.correctAnswer) {
      console.log("got it right!");
      this.placeholder = "🎉 You got it right!";
      this.actionText = "Congrats!";
    } else {
      console.log("got it wrong");
      this.placeholder = "❌ Wrong answer.";
      this.actionText = "Try again.";
    }
  }
}

Was, wenn wir eine Methode aufrufen wollen, die die Webkomponente zur Verfügung gestellt hat? In unserem Beispiel würde das wie folgt aussehen: In app.component.ts

this.keypadComponent.nativeElement.cancelAction();

Die Anwendung ruft die Methode der Komponente Keypad cancelAction() Methode auf. Achten Sie auf nativeElement. Das wird benötigt und kommt von ElementRef.

Verwendung von Angular zur Erstellung von Webkomponenten

Kommen wir nun zur Metaebene. In dieser Serie haben wir die Verwendung von Webkomponenten in verschiedenen Frameworks besprochen, aber was wäre, wenn wir das Framework verwenden könnten, um Webkomponenten zu erstellen? Das ist der Punkt, an dem Angular-Elemente ins Spiel kommen. Wenn Sie also Angular wirklich mögen, müssen Sie das Ökosystem nicht verlassen.

Schlussfolgerung

Angular hat die Hürde für den Einsatz von Webkomponenten in seinen Applications gesenkt. Es wird der Aussage "The modern web developer's platform" auf der Homepage gerecht. So sehr, dass Sie, wenn Sie wirklich in Angular sind, können Sie es verwenden, um Web-Komponenten zu bauen!

Haben Sie versucht, Webkomponenten in Angular einzubinden oder sie mit Angular Elements zu erstellen? Lassen Sie es uns auf unserem Slack-Kanal der Gemeinschaft.