कोणीय नुकसान बाईपास और समय की बचत

कोणीय के साथ, आप कुछ भी कर सकते हैं। या लगभग सब कुछ। लेकिन कभी-कभी यह कपटी "लगभग" इस तथ्य की ओर जाता है कि डेवलपर वर्कअराउंड बनाकर समय बर्बाद कर रहा है, या यह समझने की कोशिश कर रहा है कि कुछ क्यों हो रहा है, या क्यों कुछ अपेक्षा के अनुरूप काम नहीं कर रहा है।



आज हम जिस लेख का अनुवाद कर रहे हैं, उसके लेखक का कहना है कि वह उन युक्तियों को साझा करना चाहता है जो कुछ समय के लिए कोणीय डेवलपर्स को बचाने में मदद करेंगे। वह कोणीय के नुकसान के बारे में बात करने जा रहा है, जिसे उसने (और न केवल उसे) मिलने का मौका दिया था।

नंबर 1। आपके द्वारा लागू किया गया कस्टम निर्देश काम नहीं करता है

तो, आपको एक अच्छा तृतीय-पक्ष कोणीय निर्देश मिला और उसने इसे कोणीय टेम्पलेट में मानक तत्वों के साथ उपयोग करने का निर्णय लिया। अद्भुत! आइए इसे करने का प्रयास करें:

<span awesomeTooltip="'Tooltip text'"> </span> 

आप आवेदन शुरू करें ... और कुछ नहीं होता है। आप किसी भी सामान्य, अनुभवी प्रोग्रामर की तरह, क्रोम डेवलपर टूल कंसोल में देखें। और आपको वहां कुछ भी दिखाई नहीं दे रहा है। निर्देश काम नहीं करता है और कोणीय चुप है।

फिर आपकी टीम के कुछ उज्ज्वल सिर निर्देश को वर्ग कोष्ठक में रखने का निर्णय लेते हैं।

 <span [awesomeTooltip]="'Tooltip text'"> </span> 

उसके बाद, थोड़ा समय गंवाने के बाद, हम कंसोल में निम्नलिखित देखते हैं।


यहाँ बात है: हम सिर्फ निर्देश के साथ मॉड्यूल आयात करना भूल गए

अब समस्या का कारण काफी स्पष्ट है: हम केवल कोणीय अनुप्रयोग मॉड्यूल में निर्देश मॉड्यूल आयात करना भूल गए।
यह एक महत्वपूर्ण नियम की ओर जाता है: वर्ग कोष्ठक के बिना निर्देशों का उपयोग कभी न करें।

आप यहां निर्देशों के साथ प्रयोग कर सकते हैं ।

नंबर 2। ViewChild अपरिभाषित देता है

मान लीजिए आपने एक कोणीय टेम्प्लेट में वर्णित पाठ प्रविष्टि तत्व का लिंक बनाया है।

 <input type="text" name="fname" #inputTag> 

आप RxJS fromEvent फ़ंक्शन का उपयोग करके जा रहे हैं, एक स्ट्रीम बनाने के लिए जिसमें फ़ील्ड में प्रवेश किया जाता है वह गिर जाएगी। ऐसा करने के लिए, आपको इनपुट फ़ील्ड के लिए एक लिंक की आवश्यकता होती है, जिसे कोणीय ViewChild डेकोरेटर का उपयोग करके प्राप्त किया जा सकता है:

 class SomeComponent implements AfterViewInit {    @ViewChild('inputTag') inputTag: ElementRef;    ngAfterViewInit(){        const input$ = fromEvent(this.inputTag.nativeElement, 'keyUp')    } ...   } 

यहां, RxJS fromEvent फ़ंक्शन का उपयोग करके, हम एक स्ट्रीम बनाते हैं जिसमें फ़ील्ड में दर्ज किया गया डेटा गिर जाएगा।
इस कोड का परीक्षण करें।


त्रुटि

क्या हुआ?

वास्तव में, निम्नलिखित नियम यहां लागू होता है: यदि ViewChild undefined रिटर्न देता है, तो टेम्पलेट में *ngIf ।

 <div *ngIf="someCondition">    <input type="text" name="fname" #inputTag> </div> 

यहां वह समस्या का अपराधी है।

इसके अलावा, समस्या के तत्व के ऊपर अन्य संरचनात्मक निर्देशों या ng-template लिए टेम्पलेट की जांच करें।
इस समस्या के संभावित समाधान पर विचार करें।

समस्या को हल करने के। वैरिएंट of1

आप बस टेम्पलेट तत्व को छिपा सकते हैं यदि आपको इसकी आवश्यकता नहीं है। इस स्थिति में, तत्व हमेशा मौजूद रहेगा और ViewChild ngAfterViewInit हुक में इसका लिंक वापस कर ngAfterViewInit ।

 <div [hidden]="!someCondition">    <input type="text" name="fname" #inputTag> </div> 

समस्या को हल करने के। वैरिएंट ▍2

इस समस्या को हल करने का एक और तरीका सेटलर्स का उपयोग करना है।

 class SomeComponent {   @ViewChild('inputTag') set inputTag(input: ElementRef|null) {    if(!input) return;       this.doSomething(input);  }  doSomething(input) {    const input$ = keysfromEvent(input.nativeElement, 'keyup');    ...  } } 

यहां, जैसे ही inputTag प्रॉपर्टी को एक विशिष्ट मूल्य प्रदान करता है, हम इनपुट फ़ील्ड में दर्ज डेटा से एक स्ट्रीम बनाते हैं।

इस मुद्दे से संबंधित उपयोगी संसाधन यहां दिए गए हैं:

• यहां आप पढ़ सकते हैं कि Angular 8 में ViewChild के परिणाम स्थिर और गतिशील हो सकते हैं।
• यदि आपको RxJs के साथ काम करने में कठिनाई हो रही है - इस वीडियो पाठ्यक्रम पर एक नज़र डालें।

नंबर 3। * NgFor (DOM में तत्वों के दिखाई देने के बाद) के साथ उत्पन्न सूची को अपडेट करते समय कोड निष्पादन

मान लीजिए कि आपके पास स्क्रॉल करने योग्य सूचियों के आयोजन के लिए कुछ दिलचस्प कस्टम निर्देश हैं। आप इसे एक सूची पर लागू करने जा रहे हैं, जो कोणीय *ngFor का उपयोग करके बनाई गई है।

 <div *ngFor="let item of itemsList; let i = index;"     [customScroll]     >  <p *ngFor="let item of items" class="list-item">{{item}}</p>   </div> 

आमतौर पर, ऐसे मामलों में, जब सूची को अद्यतन करते हैं, तो आपको स्क्रॉल व्यवहार को कॉन्फ़िगर करने के लिए scrollDirective.update जैसे कुछ कॉल करने की आवश्यकता होती है, जो सूची में हुए परिवर्तनों को ध्यान में रखते हैं।

ऐसा लगता है कि यह ngOnChanges हुक का उपयोग करके किया जा सकता है:

 class SomeComponent implements OnChanges {  @Input() itemsList = [];   @ViewChild(CustomScrollDirective) scroll: CustomScrollDirective;  ngOnChanges(changes) {    if (changes.itemsList) {      this.scroll.update();    }  } ... } 

सच है, यहाँ हम एक समस्या का सामना कर रहे हैं। ब्राउज़र को अद्यतन सूची प्रदर्शित करने से पहले हुक को कहा जाता है। नतीजतन, सूची स्क्रॉल करने के लिए निर्देश मापदंडों का पुनर्गणना गलत तरीके से किया जाता है।

*ngFor फिनिश काम के बाद कॉल को सही कैसे करें?

आप इन 3 सरल चरणों का पालन करके ऐसा कर सकते हैं:

Epस्टेप नंबर 1

उन तत्वों के लिंक डालें जहाँ *ngFor ( #listItems ) #listItems ।

 <div [customScroll]>    <p *ngFor="let item of items" #listItems>{{item}}</p> </div> 

EpStep संख्या 2

कोणीय ViewChildren डेकोरेटर का उपयोग करके इन तत्वों की एक सूची प्राप्त करें। यह QueryList प्रकार की एक इकाई देता है।

Epस्टेप नंबर 3

QueryList वर्ग में केवल पढ़ने के लिए संपत्ति होती है जो हर बार सूची में परिवर्तन होने पर घटनाओं को QueryList ।

 class SomeComponent implements AfterViewInit {  @Input() itemsList = [];   @ViewChild(CustomScrollDirective) scroll: CustomScrollDirective;  @ViewChildren('listItems') listItems: QueryList<any>;  private sub: Subscription;   ngAfterViewInit() {    this.sub = this.listItems.changes.subscribe(() => this.scroll.update())  } ... } 

अब समस्या का समाधान हो गया है। यहां आप संबंधित उदाहरण के साथ प्रयोग कर सकते हैं।

नंबर 4। ActivatedRoute.queryParam के साथ समस्‍याएँ जो कभी-कभी क्वेरीज़ पैरामीटर के बिना चलाई जा सकती हैं

निम्नलिखित कोड हमें इस समस्या के सार को समझने में मदद करेगा।

 // app-routing.module.ts const routes: Routes = [    {path: '', redirectTo: '/home', pathMatch: 'full'},    {path: 'home', component: HomeComponent},  ];   @NgModule({    imports: [RouterModule.forRoot(routes)], //  #1    exports: [RouterModule]  })  export class AppRoutingModule { }    //app.module.ts  @NgModule({    ...    bootstrap: [AppComponent] //  #2  })  export class AppModule { }   // app.component.html  <router-outlet></router-outlet> //  #3    // app.component.ts  export class AppComponent implements OnInit {    title = 'QueryTest';     constructor(private route: ActivatedRoute) { }     ngOnInit() {      this.route.queryParams          .subscribe(params => {            console.log('saveToken', params); //  #4          });    }  } 

इस कोड के कुछ अंशों पर टिप्पणी की गई है जैसे #x । उन पर विचार करें:

1. एप्लिकेशन के मुख्य मॉड्यूल में, हमने मार्गों को परिभाषित किया और वहां RouterModule जोड़ा। रूट कॉन्फ़िगर किए गए हैं ताकि यदि URL में कोई मार्ग प्रदान नहीं किया जाता है, तो हम उपयोगकर्ता को /home पेज पर रीडायरेक्ट करते हैं।
2. डाउनलोड करने के लिए एक घटक के रूप में, हम मुख्य मॉड्यूल AppComponent में निर्दिष्ट करते हैं।
3. उपयुक्त मार्ग घटकों के उत्पादन के लिए AppComponent <router-outlet> का उपयोग करता है।
4. अब सबसे महत्वपूर्ण बात। हमें URL से मार्ग के लिए queryParams प्राप्त करने की आवश्यकता है

मान लीजिए कि हमें निम्नलिखित URL मिला है:

 https://localhost:4400/home?accessToken=someTokenSequence 

इस मामले में, queryParams इस तरह queryParams देगा:

 {accessToken: 'someTokenSequence'} 

आइए ब्राउज़र में इस सब के काम को देखें।


किसी एप्लिकेशन का परीक्षण करना जो एक रूटिंग सिस्टम को लागू करता है

यहां आपके पास समस्या के सार के बारे में एक प्रश्न हो सकता है। हमें पैरामीटर मिला, सब कुछ उम्मीद के मुताबिक काम करता है ...

ब्राउज़र के उपरोक्त स्क्रीनशॉट पर एक नज़र डालें, और कंसोल में क्या प्रदर्शित किया गया है। यहां आप देख सकते हैं कि queryParams ऑब्जेक्ट दो बार जारी किया गया है। पहला ऑब्जेक्ट खाली है, यह कोणीय राउटर की प्रारंभिक प्रक्रिया के दौरान जारी किया गया है। उसके बाद ही हमें एक ऑब्जेक्ट मिलता है जिसमें अनुरोध पैरामीटर होते हैं (हमारे मामले में - {accessToken: 'someTokenSequence'} )।

समस्या यह है कि यदि URL में कोई अनुरोध पैरामीटर नहीं हैं, तो राउटर कुछ भी वापस नहीं करेगा। वह है - पहली खाली वस्तु जारी करने के बाद, दूसरी वस्तु भी, खाली है, जो मापदंडों की अनुपस्थिति का संकेत दे सकती है, जारी नहीं की जाएगी।


मापदंडों के बिना किसी अनुरोध को निष्पादित करते समय, दूसरी वस्तु जारी नहीं की जाती है

नतीजतन, यह पता चलता है कि अगर कोड एक दूसरी वस्तु की अपेक्षा करता है जिससे वह अनुरोध डेटा प्राप्त कर सकता है, तो यह लॉन्च नहीं किया जाएगा यदि URL में कोई अनुरोध पैरामीटर नहीं थे।

इस समस्या को कैसे हल करें? यहां RxJs हमारी मदद कर सकते हैं। हम ActivatedRoute.queryParams पर आधारित दो अवलोकनीय वस्तुएँ बनाएंगे। हमेशा की तरह - समस्या का चरण-दर-चरण समाधान पर विचार करें।

Epस्टेप नंबर 1

पहली अवलोकनीय वस्तु, paramsInUrl$ , यदि queryParams खाली नहीं queryParams तो डेटा paramsInUrl$ देगी:

 export class AppComponent implements OnInit {    constructor(private route: ActivatedRoute,                private locationService: Location) {    }    ngOnInit() {             //            //              const paramsInUrl$ = this.route.queryParams.pipe(            filter(params => Object.keys(params).length > 0)        );     ...    } } 

EpStep संख्या 2

दूसरा अवलोकन योग्य ऑब्जेक्ट, noParamsInUrl$ , केवल रिक्त मान noParamsInUrl$ यदि URL में कोई अनुरोध पैरामीटर नहीं मिले:

 export class AppComponent implements OnInit {    title = 'QueryTest';    constructor(private route: ActivatedRoute,                private locationService: Location) {    }    ngOnInit() {                 ...        //   ,     ,   URL        //             const noParamsInUrl$ = this.route.queryParams.pipe(            filter(() => !this.locationService.path().includes('?')),            map(() => ({}))        );            ...    } } 

Epस्टेप नंबर 3

अब RxJS मर्ज फ़ंक्शन का उपयोग करके देखी गई वस्तुओं को मिलाएं:

 export class AppComponent implements OnInit {    title = 'QueryTest';    constructor(private route: ActivatedRoute,                private locationService: Location) {    }    ngOnInit() {             //            //              const paramsInUrl$ = this.route.queryParams.pipe(            filter(params => Object.keys(params).length > 0)        );        //   ,     ,   URL        //             const noParamsInUrl$ = this.route.queryParams.pipe(            filter(() => !this.locationService.path().includes('?')),            map(() => ({}))        );        const params$ = merge(paramsInUrl$, noParamsInUrl$);        params$.subscribe(params => {            console.log('saveToken', params);        });    } } 

अब देखा गया param$ वस्तु केवल एक बार param$ मान param$ - चाहे कुछ भी queryParams में queryParams हो (क्वेरी पैरामीटर्स के साथ कोई ऑब्जेक्ट queryParams ) या नहीं (कोई खाली वस्तु queryParams )।

आप यहां इस कोड के साथ प्रयोग कर सकते हैं ।

नंबर 5। धीमे पृष्ठ

मान लें कि आपके पास एक घटक है जो कुछ स्वरूपित डेटा प्रदर्शित करता है:

 // home.component.html <div class="wrapper" (mousemove)="mouseCoordinates = {x: $event.x, y: $event.y}">  <div *ngFor="let item of items">     <span>{{formatItem(item)}}</span>  </div> </div> {{mouseCoordinates | json}} // home.component.ts export class HomeComponent {    items = [1, 2, 3, 4, 5, 6];    mouseCoordinates = {};    formatItem(item) {              //           const t = Array.apply(null, Array(5)).map(() => 1);             console.log('formatItem');        return item + '%';    } } 

यह घटक दो समस्याओं को हल करता है:

1. यह तत्वों की एक सरणी प्रदर्शित करता है (यह माना जाता है कि यह ऑपरेशन एक बार किया जाता है)। इसके अलावा, यह स्वरूपित करता है जिसे formatItem विधि कहकर प्रदर्शित किया जाता है।
2. यह माउस के निर्देशांक प्रदर्शित करता है (यह मूल्य स्पष्ट रूप से अक्सर अद्यतन किया जाएगा)।

आप इस घटक से कोई प्रदर्शन समस्याएँ होने की अपेक्षा नहीं करते हैं। इसलिए, सभी औपचारिकताओं का पालन करने के लिए केवल एक प्रदर्शन परीक्षण चलाएं। हालाँकि, इस परीक्षण के दौरान कुछ विषमताएँ दिखाई देती हैं।


FormatItem कॉल के बहुत सारे और CPU लोड का एक बहुत

मामला क्या है? लेकिन तथ्य यह है कि जब कोणीय टेम्प्लेट को फिर से करता है, तो यह टेम्प्लेट से सभी कार्यों को कॉल करता है (हमारे मामले में, formatItem कार्य फ़ंक्शन)। परिणामस्वरूप, यदि कोई भारी गणना टेम्पलेट फ़ंक्शन में की जाती है, तो यह प्रोसेसर पर दबाव डालता है और यह प्रभावित करता है कि उपयोगकर्ता संबंधित पृष्ठ को कैसे देखते हैं।

इसे कैसे ठीक करें? यह formatItem में पहले से की गई formatItem को पहले से करने के लिए पर्याप्त है, और पृष्ठ पर पहले से तैयार डेटा को प्रदर्शित करता है।

 // home.component.html <div class="wrapper" (mousemove)="mouseCoordinates = {x: $event.x, y: $event.y}">  <div *ngFor="let item of displayedItems">    <span>{{item}}</span>  </div> </div> {{mouseCoordinates | json}} // home.component.ts @Component({    selector: 'app-home',    templateUrl: './home.component.html',    styleUrls: ['./home.component.sass'] }) export class HomeComponent implements OnInit {    items = [1, 2, 3, 4, 5, 6];    displayedItems = [];    mouseCoordinates = {};    ngOnInit() {        this.displayedItems = this.items.map((item) => this.formatItem(item));    }    formatItem(item) {        console.log('formatItem');        const t = Array.apply(null, Array(5)).map(() => 1);        return item + '%';    } } 

अब प्रदर्शन परीक्षण बहुत अधिक सभ्य लगता है।


केवल 6 formatItem कॉल और कम प्रोसेसर लोड

अब एप्लिकेशन बहुत बेहतर काम करता है। लेकिन यहां उपयोग किए जाने वाले समाधान में कुछ विशेषताएं हैं जो हमेशा सुखद नहीं होती हैं:

• चूंकि हम टेम्पलेट में माउस के निर्देशांक को प्रदर्शित करते हैं, इसलिए mousemove इवेंट अभी भी एक परिवर्तन की जाँच करता है। लेकिन, चूंकि हमें माउस के निर्देशांक की आवश्यकता है, इसलिए हम इससे छुटकारा नहीं पा सकते हैं।
• यदि mousemove इवेंट हैंडलर को केवल कुछ गणनाएं करने की आवश्यकता होती है (जो पृष्ठ पर प्रदर्शित की गई चीज़ों को प्रभावित नहीं करती है), तो आवेदन को गति देने के लिए, आप निम्न कार्य कर सकते हैं:
  
  
  1. आप इवेंट हैंडलर फ़ंक्शन के अंदर NgZone.runOutsideOfAngular उपयोग कर सकते हैं। यह mousemove इवेंट होने पर परिवर्तनों की जांच को शुरू होने से रोकता mousemove (यह केवल इस हैंडलर को प्रभावित करेगा)।
  2. आप polyfills.ts में कोड की निम्नलिखित पंक्ति का उपयोग करके कुछ घटनाओं के लिए ज़ोन.जेएस पैच को रोक सकते हैं। यह संपूर्ण कोणीय अनुप्रयोग को प्रभावित करेगा।

 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; //      

यदि आप कोणीय-अनुप्रयोगों के प्रदर्शन में सुधार के मुद्दों में रुचि रखते हैं - यहां , यहां , यहां और यहां - इस बारे में उपयोगी सामग्री।

परिणाम

अब जब आपने यह लेख पढ़ लिया है, तो 5 नए उपकरण आपके कोणीय-डेवलपर शस्त्रागार में दिखाई देने चाहिए, जिसके साथ आप कुछ सामान्य समस्याओं को हल कर सकते हैं। हमें उम्मीद है कि आपके द्वारा यहां दिए गए सुझाव आपको कुछ समय बचाने में मदद करेंगे।

प्रिय पाठकों! क्या आप कुछ भी जानते हैं जो आपको कोणीय अनुप्रयोगों के विकास में समय बचाने में मदद करता है?