Τρόπος δημιουργίας γωνιακών 6 προσαρμοσμένων στοιχείων και στοιχείων Web

6 Βήματα για τη δημιουργία γωνιακών στοιχείων χρησιμοποιώντας το Angular CLI

Τα γωνιακά στοιχεία είναι γωνιακά στοιχεία που φέρουν την ελαχιστοποιημένη έκδοση ολόκληρου του πλαισίου. Σας επιτρέπουν να δημιουργήσετε προσαρμοσμένα στοιχεία (ένα από τα στοιχεία του ιστού) με έναν πλαίσιο-αγνωστικικό τρόπο. Μπορούν να χρησιμοποιηθούν σε απλά διαδικτυακά έργα, αλλά με τις δυνάμεις του Angular μέσα.

Αφού διάβασα την επίσημη τεκμηρίωση για γωνιακά στοιχεία, συνειδητοποίησα ότι δεν διαθέτει το μέρος εφαρμογής με δομημένο τρόπο. Αυτός είναι ο λόγος που δηλώνω τα βήματα για να συνεχίσω!

1. Εγκαταστήστε το Angular CLI 6 και δημιουργήστε ένα νέο έργο

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

Καθώς η Angular εισήγαγε την έννοια των προσαρμοσμένων στοιχείων στο Angular 6, πρέπει να έχουμε εγκαταστήσει v6 ή νεότερη έκδοση. Μπορείτε επίσης να προσθέσετε τη --styleσημαία για να ορίσετε την προεπιλεγμένη επέκταση στυλ.

2. Προσθέστε πακέτο στοιχείων

Τα προσαρμοσμένα στοιχεία δεν εφαρμόζονται πλήρως από όλα τα προγράμματα περιήγησης. Ως εκ τούτου, απαιτούμε από τα Polyfills να λειτουργήσουν. Με τη νέα εντολή CLI ng addμπορείτε να προσθέσετε τη γωνιακή βιβλιοθήκη και τα απαιτούμενα πολυπληρώματα:

ng add @angular/elements

3. Δημιουργήστε ένα στοιχείο

Ας δημιουργήσουμε ένα στοιχείο που θα λειτουργεί ως προσαρμοσμένο στοιχείο έως το τέλος αυτής της ανάρτησης:

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

Χρησιμοποιούμε για ViewEncapsulation.Nativeνα αποτρέψουμε το στυλ των συστατικών από την αιμορραγία και να επηρεάσουν άλλα στοιχεία. Αυτό θα καταστήσει το στοιχείο μας στην εγγενή υλοποίηση του σκιά DOM του προγράμματος περιήγησης (v0; για το v1 που χρησιμοποιούμε ViewEncapsulation.ShadowDOM) ομαδοποιώντας όλα τα στυλ, το πρότυπο και τον κωδικό κλάσης συστατικών σε ένα μόνο αρχείο.

4. Προσθέστε ιδιότητες στο στοιχείο

Αφού πραγματοποιήσετε μερικές αλλαγές, το στοιχείο του κουμπιού μοιάζει με:

Σύμφωνα με τα επίσημα έγγραφα:

Το API δημιουργίας αναλύει το στοιχείο που αναζητά ιδιότητες εισαγωγής και καθορίζει τα αντίστοιχα χαρακτηριστικά για το προσαρμοσμένο στοιχείο.

Μετατρέπει τα ονόματα των ιδιοτήτων για να τα καταστήσει συμβατά με προσαρμοσμένα στοιχεία, τα οποία δεν αναγνωρίζουν διακρίσεις πεζών. Τα προκύπτοντα ονόματα χαρακτηριστικών χρησιμοποιούν πεζά διαχωρισμένα με παύλα. Για παράδειγμα, για ένα στοιχείο με @Input('myInputProp') inputProp, το αντίστοιχο προσαρμοσμένο στοιχείο καθορίζει ένα χαρακτηριστικό " my-input-prop”.

Και επίσης:

Οι εξόδους στοιχείων αποστέλλονται ως προσαρμοσμένα συμβάντα HTML, με το όνομα του προσαρμοσμένου συμβάντος να ταιριάζει με το όνομα εξόδου.

Για παράδειγμα, για ένα στοιχείο με @Output() valueChanged = new EventEmitter(), το αντίστοιχο προσαρμοσμένο στοιχείο θα αποστείλει συμβάντα με το όνομα "valueChanged". Τα εκπεμπόμενα δεδομένα θα αποθηκευτούν στην detailιδιοκτησία του συμβάντος . Εάν δώσετε ένα ψευδώνυμο, χρησιμοποιείται αυτή η τιμή. Για παράδειγμα,@Output('myClick') clicks = new EventEmitter gt;(); results in dispatch events with the name "myClick".

5. Update NgModule

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.