2017-10-09 24 views
5

मैं पिछले बड़े पैमाने पर कोणीय 2 ऐप के अनुभव पर निर्माण कर रहा हूं। मैं प्रतिपादन चक्र नियंत्रण में रखने के लिए वास्तव में सावधान रहा हूं। एक लॉग रखना यह है कि मैं जांच करता हूं कि क्या होता है।क्या मुझे कोणीय 2 में प्रतिपादन चक्रों को बचाने के लिए संकल्पों के बजाय गार्ड का उपयोग करना चाहिए?

नियंत्रक

public debugTemplate() { 
    DEBUG.render && debug('Render FooCmp'); 
} 

खाका

{{ debugTemplate() }} 

मैं स्मार्ट घटकों में केवल ngrx राज्य दुकान सदस्यता का उपयोग किया गया है। इस तरह से मैं ChangeDetectionStrategy.OnPush

// Ngrx state store subscription 
this._fooService.foo$().subscribe(exp => this.foo = exp); 

ng serve --prod --aot का उपयोग के साथ ActivatedRouteSnapshot या RouteReuseStrategy

का उपयोग कर गार्ड

import { Injectable } from '@angular/core'; 
import { CanActivate, ActivatedRouteSnapshot, 
    RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { environment } from '../../../environments/environment'; 
import { DEBUG } from '../../../config/config'; 
import * as Debug from 'debug'; 

// Interfaces 
import { Foo } from '../interfaces/foo'; 

// Services 
import { BarService } from '../services/bar.service'; 
import { FooService } from '../services/foo.service'; 

// Debug 
const debugOff = (...any) => { }, debug = Debug('app:FooPageGuard'); 

@Injectable() 
export class FooPageGuard implements CanActivate { 

    constructor(
     private _barService: BarService, 
     private _fooService: FooService 
    ) { 
     DEBUG.constr && debug('Construct FooPageGuard'); 
    } 

    canActivate(
     route: ActivatedRouteSnapshot, 
     state: RouterStateSnapshot 
    ): Observable<boolean> { 
     DEBUG.guard && debug('Guard FooPageGuard'); 

     return this._fooService.foo$().switchMap(
      foo => this._barService.getBar(foo) 
     ) 
     .map(data => { if (data) {return true} }) 
     .first() // Take first and enable the route 
     .do(foo => DEBUG.guard && debug('Guard OK FooPageGuard:', foo)) 

    } 
} 

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

तो सवाल। क्या इस सम्मेलन को बाईपास करना ठीक है? डेटा अनुरोध को ट्रिगर करने वाले गार्ड के पक्ष में घटक में एनजीआरएक्स राज्य स्टोर सदस्यता और डुबकी संकल्प + मार्ग सदस्यता का उपयोग करना।

एक और अजीब व्यवहार यह है कि मैं जो भी करता हूं उससे कोई फर्क नहीं पड़ता कि मेरे पास अभी भी कुछ AppCmp प्रस्तुतिकरण हैं जो बच्चों के comps से पहले Init एड के पहले स्वयं को अवलोकन द्वारा ट्रिगर किया जाता है।

संपादित

मैं बस आज कुछ परेशानी थी। पृष्ठों (स्मार्ट घटकों) जैसे कंटेनर घटकों के लिए OnPush का उपयोग करना गलती थी। सदस्यता आग लग जाएगी लेकिन टेम्पलेट को अद्यतन मान प्राप्त नहीं होंगे। ऑनपश से इसकी उम्मीद है क्योंकि कोई इनपुट ट्रिगर नहीं होता है। इसलिए मैं केवल गूंगा घटकों पर ऑनपश का उपयोग कर रहा हूं, जो अभी भी एक महत्वपूर्ण सुधार है क्योंकि वे कड़ी मेहनत करते हैं।

संपादित करें 2 - उपयोग रिसोल्वर, गार्ड नहीं

खैर ... यह ऐसा नहीं हो पाया अपेक्षा के अनुरूप। आइए बस यह कहें कि यदि आपके पास एक अवलोकन योग्य है जिसे अभी तक नहीं निकाल दिया गया है, तो गार्ड बस प्रवाह को स्थायी रूप से अवरुद्ध कर देगा। तो मेरा शानदार उदाहरण सिर्फ इसलिए काम कर रहा था क्योंकि अवलोकनों के पास पहले से ही कुछ मूल्य थे जो कि सत्य के लिए मैप किए गए थे। पूरी तरह से सफाई करने के बाद मैंने पाया कि मेरे ऐप ने काम करना बंद कर दिया है।

संक्षेप में, निम्नलिखित मूल उदाहरण एक रिज़ॉल्वर के भीतर काम करता है लेकिन गार्ड नहीं। ऐसा इसलिए है क्योंकि जब वे इसके लिए पूछते हैं तो देखने योग्य व्यक्ति को कोई मूल्य वापस नहीं मिल सकता है, इसलिए वह मानता है कि यह कोई नहीं है। मुझे बस जांच करनी होगी कि उन अतिरिक्त रेंडरिंग कहां से आ रही हैं। कहीं कुछ दोषपूर्ण कोड होना चाहिए।

return Observable.interval(1000) 
    .take(1) // Needed to trigger the guard. Resolvers do just fine without 
    .map(() => true) 
+1

मेरी राय, अगर यह काम करता है तो यह ठीक है। एकमात्र चीज जो आप जोड़ना चाहती है वह कोड में कोड को fecthTheData जैसी नामित विधि में लपेटती है, इसलिए कोई और देख सकता है कि यह वास्तव में 'गार्ड कोड' नहीं है। लेकिन, रिज़ॉल्यूवर कोड और गार्ड कोड के बीच क्या अंतर है? क्या रिज़ॉलर कई बार बुला रहा है? एओटी का उपयोग न करने पर क्या होता है, यानी एओटी के लिए असाधारण 'बग' है? –

+0

समय से पहले बिल्डिंग कोणीय कमांड लाइन में डबल चेक को अक्षम करने में मदद करता है। चूंकि मैंने वेबपैक कॉन्फ़िगरेशन को बाहर निकाला है, इसलिए मैं इस तरह से पसंद करता हूं। दोहरी जांच के साथ वास्तविक प्रस्तुतिकरण को देखना संभव है। मैं 'fecthTheData' से सहमत हूं मैं ऐसा करने के लिए योजना बना रहा था। जब तक वे सब खत्म नहीं हो जाते हैं तब तक गार्ड अवलोकनों को निष्पादित करता प्रतीत होता है और फिर प्रत्येक अवलोकन करने वाली फायरिंग के लिए प्रस्तुत करने वाले रिज़ॉल्यूवर को अनलिंक करता है। –

+0

यह दिलचस्प है। स्विचमैप अवलोकनों को 'घोंसला' करने का एक उपन्यास विचार है (मुझे लगता है कि यही कारण है)। मैं बस पहले की सदस्यता लेता हूं और अगले सब्सक्राइब के अंदर कॉल करता हूं, लेकिन निश्चित रूप से यह धीमा है। अपने स्वयं के संकल्प कोड को देखते हुए, मुझे नहीं लगता कि अवलोकन योग्य वहां अलग-अलग व्यवहार क्यों करेंगे - आरएक्सजे सामान विभिन्न स्थानों पर सुसंगत होना चाहिए। –

उत्तर

0

उपयोग रिसोल्वर, गार्ड नहीं

खैर ... यह ऐसा नहीं हो पाया अपेक्षा के अनुरूप। आइए बस यह कहें कि यदि आपके पास एक अवलोकन योग्य है जिसे अभी तक नहीं निकाल दिया गया है, तो गार्ड बस प्रवाह को स्थायी रूप से अवरुद्ध कर देगा। तो मेरा शानदार उदाहरण सिर्फ इसलिए काम कर रहा था क्योंकि अवलोकनों के पास पहले से ही कुछ मूल्य थे जो कि सत्य के लिए मैप किए गए थे। पूरी तरह से सफाई करने के बाद मैंने पाया कि मेरे ऐप ने काम करना बंद कर दिया है।

संक्षेप में, निम्नलिखित मूल उदाहरण एक रिज़ॉल्वर के भीतर काम करता है लेकिन गार्ड नहीं। ऐसा इसलिए है क्योंकि जब वे इसके लिए पूछते हैं तो देखने योग्य व्यक्ति को कोई मूल्य वापस नहीं मिल सकता है, इसलिए वह मानता है कि यह कोई नहीं है। मुझे बस जांच करनी होगी कि उन अतिरिक्त रेंडरिंग कहां से आ रही हैं। कहीं कुछ दोषपूर्ण कोड होना चाहिए।

return Observable.interval(1000) 
    .take(1) // Needed to trigger the guard. Resolvers do just fine without 
    .map(() => true) 
संबंधित मुद्दे