समस्यानेस्टेड ngModules
मैं RC5 के लिए RC4 पलायन कर रहा हूँ को साझा सेवाओं के साथ कई कोणीय क्षुधा की सशर्त बूटस्ट्रैप प्रवास के, अब तक यह काम करता है, लेकिन अगर किसी को था मैं सोच रहा था के बाद से मैं वैसे भी बूटस्ट्रैप समायोजित करना मेरे बूटस्ट्रैप के लिए एक क्लीनर समाधान (शायद ngModules के साथ) मेरे बाद से यह हैकिश की तरह महसूस किया।
मूल रूप से यह कई घटक है कि हमेशा वहाँ है कि क्या वे पृष्ठ पर हैं या नहीं के आधार पर नहीं कर रहे हैं bootstraps और यह सुनिश्चित करें कि विन्यास/सहायकों घटक और उनके बच्चों के बीच साझा कर रहे हैं बनाता है। मैं सीधे 3 घटकों को ngModules में लपेट सकता था लेकिन फिर भी मुझे मॉड्यूल में साझा सेवाओं को इंजेक्ट करना होगा। क्या सभी 3 घटकों को एक मॉड्यूल में लपेटने का तरीका है और जब वे पृष्ठ पर उपलब्ध होते हैं तो उन्हें केवल बूटस्ट्रैप करते हैं? जहाँ मैं सेवाओं preconfigure सकता है इससे पहले कि वे बच्चे के घटकों में इंजेक्शन हो मैं भी फ्लॉप ngModule में एक init हुक देखते हैं।
var cs = new ConfigurationService();
var hs = new HelperService(cs);
var injector = ReflectiveInjector.resolveAndCreate([TranslateService,
{provide: TranslateLoader, useClass: JsonLoader}, HTTP_PROVIDERS]);
var ts = injector.get(TranslateService);
ts.setDefaultLang('en');
ts.use(cs.getLanguage());
var defaultProviders = [
{provide: TranslateService, useValue: ts},
{provide: ConfigurationService, useValue: cs},
{provide: HelperService, useValue: hs}
];
if ($('notification-widget').length > 0) {
bootstrap(NotificationWidgetComponent, defaultProviders);
}
if ($('livesearch-widget').length > 0){
bootstrap(LivesearchWidgetComponent, defaultProviders);
}
if ($('enterprise-search').length > 0){
bootstrap(EnterpriseSearchComponent, defaultProviders);
}
आंशिक समाधान
मैं अवधारणा अनुवाद करने के लिए एक रास्ता मिल गया:
यहाँ मेरे पुराने main.ts से प्रासंगिक हिस्सा है
main.ts सीधा के रूप में वर्णित है दस्तावेज़ों द्वारा:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
मॉड्यूल ही बूटस्ट्रैप एनोटेशन का उपयोग dosn't के बाद से इस सशर्त नहीं किया जा सकता, आप के बजाय सिर्फ घोषणाओं तो कोणीय उपयोग कर सकते हैं कि आप संभावित प्रारंभिक बिंदु जानता है और मैन्युअल रूप से बूटस्ट्रैप implemente:
@NgModule({
imports: [ BrowserModule ],
declarations: [ NotificationWidgetComponent, LivesearchWidgetComponent, EnterpriseSearchComponent ],
providers: [ConfigurationService, HelperService, TranslateService,
{provide: TranslateLoader, useClass: JsonLoader}]
})
export class AppModule {
constructor(
private conf: ConfigurationService,
private trans: TranslateService,
private help: HelperService
){
this.trans.setDefaultLang('en');
this.trans.use(this.conf.getLanguage());
}
ngDoBootstrap(){
let providers = [
{provide: ConfigurationService, useValue: this.conf},
{provide: HelperService, useValue: this.help},
{provide: TranslateService, useValue: this.trans}
];
if ($('notification-widget').length > 0) {
bootstrap(NotificationWidgetComponent, providers);
}
if ($('livesearch-widget').length > 0){
bootstrap(LivesearchWidgetComponent, providers);
}
if ($('enterprise-search').length > 0){
bootstrap(EnterpriseSearchComponent, providers);
}
}
}
सेवा विन्यास संभाला जा सकता है मॉड्यूल कन्स्ट्रक्टर और इंजेक्शन में मैन्युअल रूप से पहले किया जाता है। हालांकि बूटस्ट्रैप विधि depricated है, तो मैं ngDoBootstrap के अंतिम भाग इस के लिए बदल (सिर्फ एक परीक्षण, अनदेखी उपरोक्त दो के रूप में):
if ($('enterprise-search').length > 0){
platformBrowserDynamic().bootstrapModule(EnterpriseSearchModule, {providers: providers});
}
मॉड्यूल में ही नहीं बल्कि सरल है:
@NgModule({
imports: [ BrowserModule ],
declarations: [ EnterpriseSearchComponent ],
bootstrap: [ EnterpriseSearchComponent ]
})
export class EnterpriseSearchModule { }
मैं अब समस्या है, जो अपने आप को चलाया घटक, विन्यास सेवा को हल नहीं कर सकते, हालांकि यह स्पष्ट रूप से एक प्रदाता के रूप में रैपिंग मॉड्यूल के लिए दिया जाता है। यह मेरे लिए एक कोणीय बग की तरह लगता है या मैं बस कुछ गलत कर रहा हूँ?