यदि आप चाहते हैं, तो हम प्रतिक्रिया, Vue और यहां तक ​​कि jQuery में कोणीय घटक लागू करते हैं

यदि आपको एनपीएम में एक शांत घटक मिला, लेकिन यह उपसर्ग एनजी, एनएक्सएक्स, कोणीय और इतने पर है, तो इस बारे में परेशान न हों। इस घटक को प्राप्त करने के लिए कई समाधान हैं। इस लेख में, हम एक समाधान पर विचार करेंगे जो आधिकारिक रूप से कोणीय टीम, अर्थात् कोणीय तत्वों द्वारा समर्थित है।

अभ्यास के लिए, विस्मयकारी कोणीय से किसी भी घटक को चुनें।

मैंने एक साधारण, लेकिन बहुत दिलचस्प - एनएक्सएक्स-अवतार चुना । जो बदले में, विभिन्न सामाजिक नेटवर्क से अवतार प्रदर्शित करता है या केवल उपयोगकर्ता के आद्याक्षर प्रदर्शित करता है।
कुछ इस तरह:


और उसके पास एक साधारण एपीआई है, यहाँ एक छोटा सा उदाहरण है:

<ngx-avatar facebookId="1508319875"></ngx-avatar> <ngx-avatar src="assets/avatar.jpg"></ngx-avatar> <ngx-avatar name="John Doe"></ngx-avatar> 

और इसलिए, इसके लिए एक कोणीय परियोजना बनाएं और लाइब्रेरी को कनेक्ट करें।

 ng new avatar-lib --minimalN npm i ngx-avatar --save 

पैकेज को हमारे मॉड्यूल से कनेक्ट करें।

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import your AvatarModule import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Specify AvatarModule as an import AvatarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

अब एक सरल घटक बनाते हैं, क्योंकि डिफ़ॉल्ट रूप से `AvatarModule` अपने एकमात्र घटक को निर्यात नहीं करता है।

 ng gc avatar 

 import { Component, ViewEncapsulation, Input } from '@angular/core'; @Component({ selector: 'app-avatar', template: ` <ngx-avatar [name]="name"></ngx-avatar> `, styles: [], encapsulation: ViewEncapsulation.ShadowDom }) export class AvatarComponent { @Input() name: string; constructor() { } } 

सरलता के लिए, हमने केवल एक इनपुट पैरामीटर का उपयोग किया।

हम इस सब से एक सार्वभौमिक घटक बनाएंगे। हमारे तत्वों को काम करने के लिए, आपको हमारी परियोजना में कोणीय तत्वों को जोड़ना होगा।

 ng add @angular/elements 

अन्य बातों के अलावा, यह कमांड स्क्रिप्ट तत्वों में कस्टम तत्वों को पंजीकृत करने के लिए लाइट संस्करण भी शामिल करेगा।

 "scripts": [{ "input": "node_modules/document-register-element/build/document-register-element.js" }] 

परिणामी app.module.ts:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AvatarComponent } from './avatar.component'; import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [AvatarComponent], imports: [AvatarModule, BrowserModule], entryComponents: [AvatarComponent] }) export class AppModule { constructor(private injector: Injector) { //    Angular Element const avatarComponent = createCustomElement(AvatarComponent, { injector }); //     customElements.define('avatar-lib', avatarComponent); } ngDoBootstrap() {} } 

बहुत बढ़िया! अब हमें यह सब अच्छा करने की जरूरत है। ऐसा करने के लिए, अपना स्वयं का कलेक्टर बनाएं जो हमारे घटक को एक js फ़ाइल में पैक करेगा:

 const fs = require('fs-extra'); const concat = require('concat'); (async function build() { const files = [ './dist/avatar-lib/runtime.js', './dist/avatar-lib/polyfills.js', './dist/avatar-lib/scripts.js', './dist/avatar-lib/main.js' ]; await fs.ensureDir('elements'); await concat(files, 'elements/avatar-lib.js'); })(); 

सब कुछ तैयार है! यह केवल इकट्ठा करने के लिए बनी हुई है। ऐसी स्क्रिप्ट को हमारे पैकेज में जोड़ें। json।

 "build:elements": "ng build --prod --output-hashing none && node build.js" 

खैर, यह बात है! हमें इस तरह की js फ़ाइल मिली 'avatar-lib.js' वजन ~ 221kB और ~ 60kb गज़िप में। स्वाभाविक रूप से, कई और कोणीय / कोर के साथ यहां शामिल किया गया है। एनएक्सएक्स-अवतार का वज़न लगभग 16.8kB और 5.4kB है। अवतार-lib.js के वजन को कम करने के लिए हमें आइवी कंपाइलर की आवश्यकता होगी, लेकिन यह एक अन्य लेख के लिए एक विषय है। (मुझे उम्मीद है कि आइवी इस क्षण तक जारी हो जाएगा, या मैं अब जो उपलब्ध है उससे मैन्युअल रूप से इकट्ठा करूंगा)।

हमें कोणीय तत्वों ने क्या दिया?

यह वेब घटक को लागू करने के लिए सिर्फ एक आसान एप है। वास्तव में, कोई भी इसके बिना कर सकता था। देखें कि आप पहले क्या कर सकते थे: जिया ली द्वारा एक लेख (सक्रिय रूप से अब ज़ोन के साथ आता है) ।

हम अपने कंपोनेंट को अन्य फ्रेमवर्क में एम्बेड करते हैं।

सबसे पहले Vue में। हम आपके लिए किसी भी तरह से सुविधाजनक तरीके से कनेक्ट होते हैं और टेम्पलेट में अवतार-लिब सम्मिलित करते हैं, मानक vue bings के माध्यम से डेटा स्थानांतरित करते हैं।

 <avatar-lib :name = 'myName'></avatar-lib> 

आउटपुट इवेंट्स को व्यवस्थित करना भी संभव होगा।

Vue डेमो: https://github.com/Jamaks/angular-element/tree/master/ang-el-vue

यह प्रतिक्रिया का समय है! सब कुछ सरल है:

 <avatar-lib name = {this.myName}></avatar-lib> 

प्रतिक्रिया पर डेमो

खैर, सामान्य तौर पर, परियोजना

फिलहाल ब्राउज़र समर्थन के लिए:

https://angular.io/guide/elements#browser-support-for-custom-elements
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

बेशक, यह आपको तय करना है कि इस तरह की कार्यान्वयन विधि का उपयोग करना है या नहीं। मैं चाहूंगा कि यूआई घटक किसी भी चीज से न जुड़े हों और समान प्रत्यय न हों: एनजी-, एनजीएक्स-, वी-, रिएक्शन-, आरसी- इत्यादि।

बोनस!

घटक के आकार (ngx-avatar) से प्रेरित होकर, मैंने अभी भी ngtsc, ngcc को फीड करने की कोशिश की और फिर इसे रोलअप का उपयोग करके इकट्ठा किया। लेकिन प्रयास असफल रहे, क्योंकि चयनित घटक को कई बाहरी मॉड्यूल की आवश्यकता थी। हताश, ने इस घटक का कुछ अंश बनाया, और परिणाम सुखद आश्चर्यचकित हुए - फिलहाल (7.1.2), पुस्तकालय ~ 96kb और ~ 26 gzip में था। स्वाभाविक रूप से, बहुत सारी निर्भरताएं थीं, और मेरे रोलअप कॉन्फ़िगरेशन वांछित होने के लिए बहुत कुछ छोड़ देता है। लेकिन फिर भी, यह 3kb नहीं है जिसे हमें आइवी की प्रस्तुति के दौरान दिखाया गया था। यह उम्मीद की जा रही है कि जब वे वेबपैक (सीएलआई) के लिए एनसीसी को तैनात करेंगे और दस्तावेज लिखेंगे।

आप यहां पर कोणीय दुनिया के छोटे प्रयोग और अंदरूनी जानकारी भी प्राप्त कर सकते हैं ।