So erstellen Sie benutzerdefinierte Angular 6-Elemente und Webkomponenten

6 Schritte zum Erstellen von Winkelelementen mithilfe der Winkel-CLI

Winkelelemente sind Winkelkomponenten, die die minimierte Version des gesamten Frameworks tragen. Mit ihnen können Sie benutzerdefinierte Elemente (eine der Webkomponenten) rahmenunabhängig erstellen. Sie können in einfachen Webprojekten verwendet werden, jedoch mit den Fähigkeiten von Angular.

Nachdem ich die offizielle Dokumentation für Angular-Elemente gelesen hatte, stellte ich fest, dass der Implementierungsteil strukturiert fehlt. Das ist der Grund, warum ich die Schritte erkläre, um loszulegen!

1. Installieren Sie Angular CLI 6 und erstellen Sie ein neues Projekt

npm i -g @angular/cli ng new angular-custom-elements

Als Angular das Konzept der benutzerdefinierten Elemente in Angular 6 einführte, muss Version 6 oder höher installiert sein. Sie können auch das --styleFlag hinzufügen , um die Standardstilerweiterung festzulegen.

2. Fügen Sie ein Elementpaket hinzu

Benutzerdefinierte Elemente werden nicht von allen Browsern vollständig implementiert. Daher benötigen wir Polyfills, damit sie funktionieren. Mit dem neuen CLI-Befehl ng addkönnen Sie die Angular-Bibliothek und die erforderlichen Polyfills hinzufügen:

ng add @angular/elements

3. Erstellen Sie eine Komponente

Lassen Sie uns eine Komponente erstellen, die am Ende dieses Beitrags als benutzerdefiniertes Element fungiert:

ng g component button --inline-style --inline-template -v Native

Wir verwenden ViewEncapsulation.Native, um zu verhindern, dass die Stile der Komponenten ausbluten und andere Elemente beeinflussen. Dadurch wird unsere Komponente in der nativen Browser-Implementierung von Shadow DOM (v0; für v1 verwenden wir ViewEncapsulation.ShadowDOM) gerendert, indem alle Stile, Vorlagen und Komponentenklassencodes in einer einzigen Datei gebündelt werden.

4. Fügen Sie der Komponente Eigenschaften hinzu

Nach einigen Änderungen sieht unsere Schaltflächenkomponente folgendermaßen aus:

Laut den offiziellen Dokumenten:

Die Erstellungs-API analysiert die Komponente nach Eingabeeigenschaften und definiert entsprechende Attribute für das benutzerdefinierte Element.

Es transformiert die Eigenschaftsnamen, um sie mit benutzerdefinierten Elementen kompatibel zu machen, die keine Fallunterschiede erkennen. Die resultierenden Attributnamen verwenden durch Striche getrennte Kleinbuchstaben. Für eine Komponente mit @Input('myInputProp') inputPropdefiniert das entsprechende benutzerdefinierte Element beispielsweise ein Attribut '' my-input-prop”.

Und auch:

Komponentenausgaben werden als benutzerdefinierte HTML-Ereignisse gesendet, wobei der Name des benutzerdefinierten Ereignisses mit dem Ausgabenamen übereinstimmt.

Für eine Komponente mit @Output() valueChanged = new EventEmitter()löst das entsprechende benutzerdefinierte Element beispielsweise Ereignisse mit dem Namen "valueChanged" aus. Die ausgegebenen Daten werden in der detailEigenschaft des Ereignisses gespeichert . Wenn Sie einen Alias ​​angeben, wird dieser Wert verwendet. Zum Beispiel,@Output('myClick') clicks = new EventEmittergt;(); results in dispatch events with the name "myClick".

5. Update NgModule

Original text


Following are the major steps that need to be followed in app.module.ts:

  1. Remove the default bootstrap array which is set to AppComponent
  2. Since our ButtonComponent is not a part of any other component, and is also not a root of an Angular application, we need to tell Angular to compile it specifically. For this we put it on the entryComponents list. Otherwise Angular tree shaking will drop this component from the prod bundle.
  3. Add ngDoBootstrap() to tell Angular to use this module for bootstrapping.
  4. Angular provides the createCustomElement() function for converting an Angular component, together with its dependencies, to a custom element. The createCustomElement() function is expecting to get two parameter:
  • First, the Angular component which should be used to create the element.
  • Second, a configuration object. This object needs to include the injector property which is set to the current Injector instance.

5. The next step is to register the newly created custom element in the browser. This is done by calling customElements.define(). Please note that this is not Angular. The customElements read-only property belongs to the Window interface. It returns a reference to the CustomElementRegistryobject. This object can be used to register new custom elements. It can also get information about previously registered custom elements in the browser.

The customElements.define() method needs two parameter:

  • The first parameter is of type string and contains the name of the element. Passing the string ‘app-button’ means that the custom element on> will be registered and can be used in the HTML code.
  • The second parameter is the custom element which has been created before.

6. Now replace target value in tsconfig.json from es5 to es2015 as in browsers that support Custom Elements natively, the specification requires developers to use ES2015 classes to define Custom Elements.

6. Build and run

In order to build we will use a standard ng build command. But since it outputs four files (runtime.js , scripts.js, polyfills.js and main.js) and we’d like to distribute our component as a single js file, we need to turn hashing file names off. Let’s modify the scripts in package.json and add package entry:

"scripts": { …, "build": "ng build --prod --output-hashing=none", // For Windows: "package": "jscat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js", // For Mac or Linux: "package": "cat ./dist/angular-custom-elements/runtime.js ./dist/angular-custom-elements/polyfills.js ./dist/angular-custom-elements/scripts.js ./dist/angular-custom-elements/main.js > custom-button-element.js", …, }

Since Windows OS has no cat command run npm i jscat.

Save all and finally run:

npm run build && npm run package

The command generates custom-button-element.js that you can include in of an HTML page to see our custom element working.

Here is an example:

Summary

In summary we’ve:

  • Added important libraries for implementation
  • Registered the component in browser’s CustomElementRegistry
  • Combined the build artifacts to a single file

Complete source code can be found here.

Did you learn something new? If so please clap ? button below️ so more people can see this.