2016-08-30 34 views
5

में एक ही रूट अनुप्रयोग के कई उदाहरण हम कोणीय 2 को एक विरासत पृष्ठ में एकीकृत करते हैं ताकि कार्यक्षमता टुकड़ा अधिक उपयोगकर्ता के अनुकूल हो सके। अब तक कोणीय मॉड्यूल के लिए प्रीरेंडर बैकएंड विजेट्स का आदान-प्रदान करना बहुत अच्छा काम करता है।कोणीय 2

हालांकि मैं एक समस्या में भाग गया जो मुझे हल करने के बारे में नहीं पता: मैंने एक मॉड्यूल/घटक लिखा है जो पृष्ठ पर कई बार अलग-अलग स्थानों पर और एक अलग कॉन्फ़िगरेशन के साथ हो सकता है।

<body> 
    <div class='somewhere-on-the-page'> 
     <my-widget config='A'></my-widget> 
    </div> 
    <div class='somewhere-else-on-the-page'> 
     <my-widget config='B'></my-widget> 
    </div> 
    </body> 

Here is a Plunker मामले के। आप केवल पहली घटना शुरू कर सकते हैं। क्या इससे निपटने के बारे में कोई अवधारणा है? मुझे लगता है कि मैं एक रैपर घटक का उपयोग नहीं कर सकता क्योंकि मैं इसके अंदर पूरे टेम्पलेट को स्थानांतरित नहीं कर सकता (पृष्ठ बैकएंड में प्रस्तुत किए जाते हैं और कोणीय निर्देश वहां डाल दिए जाते हैं)।

चीयर्स

उत्तर

1

वर्तमान में यह समर्थित नहीं है। bootstrap() कहलाते समय चयनकर्ता को ओवरराइड करने की अनुमति देने के लिए एक खुली समस्या है।

import {ApplicationRef_} from '<project-root>/node_modules/@angular/core/src/application_ref' 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [MyWidgetComponent], 
    entryComponents: [MyWidgetComponent] 
}) 
class MyWidgetModule { 
    constructor(injector: Injector, cfr: ComponentFactoryResolver, appRef: ApplicationRef) { 
    const widgetCompFactory = cfr.resolveComponentFactory(MyWidgetComponent); 
    $(widgetCompFactory.selector).each((_, el) => { 
     var compRef = widgetCompFactory.create(injector, [], el); 
     var upcasted = <ApplicationRef_> appRef; 
     upcasted.registerChangeDetector(compRef.changeDetectorRef); 
    }); 
    } 
} 

कोणीय फ़ाइल से ApplicationRef_ आयात करने के लिए ध्यान रखना: कुछ संकेत दिए गए कि वह GitHub पर दे दी है के लिए टोबियास बॉश को

https://github.com/angular/angular/issues/7136

2

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

वैकल्पिक रूप से आप अपने डीओएम संदर्भ प्राप्त करने के लिए $('my-widget') (या कृपया कोई अन्य चयनकर्ता) का उपयोग कर सकते हैं, लेकिन मुझे लगता है कि यह घटक पर पूर्वनिर्धारित चयनकर्ता का उपयोग करने के लिए क्लीनर है।