ओवरराइड/तीसरे पक्ष के घटक का टेम्पलेट बढ़ाएं

Question

मैं वर्तमान में एक तृतीय पक्ष घटक आयात कर रहा हूं। मेरे उपयोग के मामले में मुझे उस विशिष्ट घटक टेम्पलेट को ओवरराइड करने की आवश्यकता है।

चूंकि यह एक तृतीय पक्ष घटक है, और एनपीएम पैकेज के माध्यम से आयात किया गया है, इसलिए मैं घटक को बदलना नहीं चाहता हूं इसलिए पैकेज को अद्यतन होने पर मुझे इसे अपडेट करने की आवश्यकता नहीं है।

क्या किसी अन्य घटक के टेम्पलेट को ओवरराइट करने का कोई तरीका है?

मुझे पता है कि आप <ng-content> का उपयोग कर सकते हैं यदि आप कुछ तत्व इंजेक्ट करना चाहते हैं। लेकिन यहां व्यवहार्य नहीं है।

import {THIRD_PARTY_DIRECTIVES} from 'ng2-select/ng2-select'; 

@Component({ 
    selector: 'example-component', 
    directives: [THIRD_PARTY_DIRECTIVES] 
}) 
export class Example { 

    private items: Array<string> = [ 
    'whatever', 'whatever2', 'whatever3' 
    ]; 
} 

वहाँ किसी भी तरह से मैं संपादन कि विशेष घटक के बिना मैं <third-party-component> के लिए चाहते हैं टेम्पलेट निर्दिष्ट कर सकते हैं है:

<third-party-component [items]="items" [example]="example"> 

नियंत्रक कुछ इस तरह है:

एचटीएमएल कुछ इस तरह है घोषणा? या यहां तक ​​कि इसे केवल विस्तारित करें?

Answer 1

आप घटक के मेटाडेटा को बदलने के लिए प्रतिबिंब का उपयोग कर सकते हैं। यहाँ super simple example है:

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'thing', 
    template: `Hi!`, 
}) 
export class Thing {} 

annotations = Reflect.getMetadata('annotations', Thing); 
for (let i = 0; i < annotations.length; i += 1) { 
    if (annotations[i].constructor.name === 'ComponentMetadata') { 
    annotations[i].template = 'Ho!'; 
    break; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    directives: [Thing], 
    template: `<thing></thing>`, 
}) 
export class App {} 

बस आप माता-पिता घटक में यह इंजेक्शन लगाने टेम्पलेट अद्यतन से पहले यह सुनिश्चित कर लें। which metadata को भी एक्सेस करने की आवश्यकता है, जो आपके मामले में DirectiveMetadata हो सकता है।

Answer 2

इसके साथ खेलने के बाद। एक साधारण विस्तार मेरे उपयोग के मामले के लिए काम करेगा।

असल में मैंने एक कक्षा बनाई जो thirdPartyClass फैली हुई है।

यहां क्या होता है कि मैं अपना खुद का चयनकर्ता बनाकर और केवल कक्षा आयात करके thirdPartyClass के लिए टेम्पलेट को ओवरराइट कर रहा हूं।

कुछ इस तरह:

import {component} from 'angular2/core'; 
import {thirdPartyClass} from 'example/example'; 

@Component({ 
    selector: 'my-selector', 
    template: '<div>my template</div>' 
}) 

export class MyOwnComponent extends thirdPartyClass { 
    constructor() { 
    super() 
    } 
} 

नोट्स:

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