2017-12-18 81 views
5

मैं समझना चाहता हूं कि डीओएम हेरफेर के लिए कोणीय में रेन्डरर 2 का उपयोग क्यों किया जाता है। क्या हम समृद्ध और प्रसिद्ध लाइब्रेरी jQuery का उपयोग जगह में Renderer2 या मूल जावास्क्रिप्ट के लिए कर सकते हैं? jQueryकोणीय 4 में रेंडरर 2 क्या है? jquery पर इसे क्यों पसंद किया जाता है?

उत्तर

5

पर Renederer2 का उपयोग करने का क्या फायदा है सामान्य ब्राउज़र संदर्भ Renderer2 DOM मैनिपुलेशन ब्राउज़र API के आसपास एक साधारण डिफ़ॉल्ट आवरण है। उदाहरण के लिए, यहाँ सिर्फ एक अपने तरीकों में से कुछ की the implementation है:

class DefaultDomRenderer2 implements Renderer2 { 

    addClass(el: any, name: string): void { el.classList.add(name); } 

    createComment(value: string): any { return document.createComment(value); } 

    createText(value: string): any { return document.createTextNode(value); } 

    appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); } 

यह सार प्रतिपादन संचालन शुद्ध डोम तत्वों से दूर करने के लिए शुरू किया गया है। उदाहरण के लिए, यदि आप एक वर्ग को जोड़ने की आवश्यकता आप इसे इस तरह करना होगा:

constructor(el: ElementRef, renderer: Renderer2) { 
    renderer.addClass(el.nativeElement, 'some'); 
} 

यहाँ आप देख सकते हैं कि आप देशी तत्वों के साथ सीधे बातचीत नहीं करते हैं और अपने एपीआई का उपयोग नहीं करते आप कैसे करना चाहते हैं jQuery के साथ:

constructor(el: ElementRef) { 
    $(el.nativeElement).addClass('some'); 
} 

एक दाता के साथ कोड डोम के अलावा अन्य प्लेटफार्मों पर चलाने के लिए सक्षम किया जा रहा है अगर आप एक रेंडरर है कि अन्य मंच के लिए विशिष्ट के विभिन्न कार्यान्वयन प्रदान की एक लाभ है। उदाहरण के लिए, कोणीय वेबवर्कर WebWorkerRenderer2 के लिए Renderer2 का कार्यान्वयन प्रदान करता है। यह विधियों को addClass लागू करता है postMessage विधियों का उपयोग करके मुख्य अनुप्रयोग को संवाद करने के लिए जो डोम को अद्यतन करने की आवश्यकता है।

+0

कोई संदर्भ जहां हम Renderer2 –

+0

@MantuNigam, मैं वहाँ से [स्रोतों] किसी भी अलग (नहीं लगता कि के विवरण वर्णन हो सकता है https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/ प्लेटफ़ॉर्म-ब्राउज़र/src/dom/dom_renderer.ts # L102) –

+0

धन्यवाद, @ AngularInDepth.com यहां एक और अच्छा उदाहरण है https://www.concretepage.com/angular-2/angular-4-renderer2- उदाहरण –

संबंधित मुद्दे