दिलचस्प पोस्ट
स्ट्रीम लाइव एंड्रॉइड ऑडियो से सर्वर नमूना http रेंज अनुरोध सत्र जावास्क्रिप्ट में सीएसएस पृष्ठभूमि का रंग करी और आंशिक आवेदन के बीच अंतर क्या है? कार्यान्वयन -शिप / -इसाइवल: / -इसी विशेष गुण …: उद्देश्य-सी संग्रह के लिए मैं आइसोलिन से 3-डी सतह कैसे उत्पन्न करूं? ActiveRecord / Rails के साथ क्वेरी में नहीं व्यक्त करने के लिए कैसे? GUIDs कितनी सुरक्षित हैं? Django के सस्पसिकऑपरेशन अमान्य HTTP_HOST शीर्षलेख विशिष्ट संपर्क प्रोग्राम को टेक्स्ट भेजें (व्हाट्सएप) विजुअल स्टूडियो 2015: इंटेलिसेंस त्रुटियां, लेकिन समाधान संकलन कैसे pthreads में धागा प्राथमिकता को बढ़ाने के लिए? सी # .NET 3.5 में प्रगति पट्टी का रंग कैसे बदल सकता है? मैं वीआईएम से सी प्रोग्राम कैसे चलाऊँ? एक सूची के सबसे आम तत्व कैसे खोजें?

कोण 2.1.0 मक्खी पर बच्चे के घटक बनाते हैं, गतिशील रूप से

मैं angular 2.1.0 में क्या करने की कोशिश कर रहा हूं, मक्खी पर बाल घटकों का निर्माण कर रहा है जिसे मूल घटक में इंजेक्ट किया जाना चाहिए। उदाहरण के लिए मूल घटक Go to previous lesson , जिसमें सभी पाठों के लिए साझा सामग्री शामिल है, जैसे कि Go to previous lesson बटन, Go to next lesson और अन्य सामान पर Go to next lesson मार्ग पैरामीटर के आधार पर, सबक सामग्री, जो कि बच्चे के घटक होने चाहिए, को मूल घटक में गतिशील रूप से इंजेक्ट किया जाना चाहिए। बाल घटकों (पाठ सामग्री) के लिए एचटीएमएल को बाहर कहीं भी सादा स्ट्रिंग के रूप में परिभाषित किया गया है, यह वस्तु की तरह हो सकता है:

 export const LESSONS = { "lesson-1": `<p> lesson 1 </p>`, "lesson-2": `<p> lesson 2 </p>` } 

माता पिता के घटक टेम्प्लेट में निम्नलिखित की तरह कुछ होने के innerHtml समस्या को आसानी से हल किया जा सकता है।

 <div [innerHTML]="lessonContent"></div> 

जहां मार्ग lessonContent के प्रत्येक परिवर्तन, संपत्ति के lessonContent पर मूल घटक का lessonContent बदल जाएगा (सामग्री (नया टेम्प्लेट) lessonContent ऑब्जेक्ट से लिया जाएगा) जिसके कारण मूल घटक टेम्पलेट को अपडेट किया जा सकता है। यह काम करता है, लेकिन कोणीय innerHtml माध्यम से इंजेक्शन की प्रक्रिया नहीं करेगा, इसलिए routerLink और अन्य सामान का उपयोग करना असंभव है।

नए कोणीय रिलीज़ से पहले मैं http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ के समाधान का उपयोग करते हुए इस समस्या का समाधान कर रहा हूं, जहां मैं ComponentMetadata ComponentResolver बनाने के लिए ComponentResolver साथ ComponentResolver का प्रयोग कर रहा हूं मक्खी, जैसे:

 const metadata = new ComponentMetadata({ template: this.templateString, }); 

जहां templateString को बाल घटक को बाल घटक के रूप में Input संपत्ति के रूप में पारित किया गया था। दोनों MetaData और ComponentResolver MetaData को angular 2.1.0 में पदावनत / निकाला गया है।

इसलिए समस्या केवल गतिशील घटक निर्माण के बारे में नहीं है, जैसे कुछ संबंधित SO प्रश्नों में वर्णित है, समस्या को सुलझाना आसान होगा यदि मैं प्रत्येक पाठ-सामग्री के लिए घटक परिभाषित करता। इसका मतलब यह होगा कि मुझे 100 अलग-अलग पाठों के लिए 100 अलग-अलग घटकों का पूर्वानुमान लगाने की आवश्यकता है। पदावनत मेटाडाटा ऐसे व्यवहार प्रदान कर रहा था जो एकल घटक के रनटाइम पर टेम्पलेट को अपडेट करने जैसा था (मार्ग पैरामीटर परिवर्तन पर एकल घटक बनाने और नष्ट करना)

अपडेट 1: जैसा कि हाल के कोणीय रिलीज में लगता है, सभी घटकों को गतिशील रूप से इंजेक्शन / इंजेक्शन बनाने की ज़रूरत होती है, entryComponents में entryComponents भीतर @NgModule पूर्वनिर्धारित होना चाहिए। इसलिए जैसा कि मुझे लगता है, ऊपर प्रश्न से संबंधित है, अगर मुझे 100 पाठ (घटकों जिसे मक्खी पर गतिशील रूप से बनाया जाना चाहिए) होना चाहिए, तो इसका मतलब है कि मुझे 100 घटकों को पूर्वनिर्धारित करने की आवश्यकता है

अद्यतन 2: अद्यतन 1 के आधार पर, इसे निम्न तरीके से ViewContainerRef.createComponent() माध्यम से किया जा सकता है:

 // lessons.ts @Component({ template: html string loaded from somewhere }) class LESSON_1 {} @Component({ template: html string loaded from somewhere }) class LESSON_2 {} // exported value to be used in entryComponents in @NgModule export const LESSON_CONTENT_COMPONENTS = [ LESSON_1, LESSON_2 ] 

अब मार्ग पैरामीटर पर मूल घटक में बदलाव

 const key = // determine lesson name from route params /** * class is just buzzword for function * find Component by name (LESSON_1 for example) * here name is property of function (class) */ const dynamicComponent = _.find(LESSON_CONTENT_COMPONENTS, { name: key }); const lessonContentFactory = this.resolver.resolveComponentFactory(dynamicComponent); this.componentRef = this.lessonContent.createComponent(lessonContentFactory); 

माता-पिता का टेम्पलेट ऐसा दिखता है:

 <div *ngIf="something" #lessonContentContainer></div> 

जहां lessonContentContainer @ViewChildren प्रॉपर्टी और lessonContent सजाया गया है @ViewChild रूप में सजाया गया है और इसे ngAfterViewInit () में आरंभ किया गया है:

 ngAfterViewInit () { this.lessonContentContainer.changes.subscribe((items) => { this.lessonContent = items.first; this.subscription = this.activatedRoute.params.subscribe((params) => { // logic that needs to show lessons }) }) } 

समाधान में एक दोष है और यही है, सभी घटकों (LESSON_CONTENT_COMPONENTS) को पूर्वनिर्धारित होने की आवश्यकता है।
क्या एक ही घटक का उपयोग करने का एक तरीका है और रनटाइम पर उस घटक के टेम्पलेट को बदलना है (मार्ग पैरामीटर परिवर्तन पर)?

वेब के समाधान से एकत्रित समाधान "कोण 2.1.0 मक्खी पर बच्चे के घटक बनाते हैं, गतिशील रूप से"

आप निम्न HtmlOutlet निर्देश का उपयोग कर सकते हैं:

 import { Component, Directive, NgModule, Input, ViewContainerRef, Compiler, ComponentFactory, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any>> { const cmpClass = class DynamicComponent {}; const decoratedCmp = Component(metadata)(cmpClass); @NgModule({ imports: [CommonModule, RouterModule], declarations: [decoratedCmp] }) class DynamicHtmlModule { } return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => { return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp); }); } @Directive({ selector: 'html-outlet' }) export class HtmlOutlet { @Input() html: string; cmpRef: ComponentRef<any>; constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { } ngOnChanges() { const html = this.html; if (!html) return; if(this.cmpRef) { this.cmpRef.destroy(); } const compMetadata = new Component({ selector: 'dynamic-html', template: this.html, }); createComponentFactory(this.compiler, compMetadata) .then(factory => { const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); this.cmpRef = this.vcRef.createComponent(factory, 0, injector, []); }); } ngOnDestroy() { if(this.cmpRef) { this.cmpRef.destroy(); } } } 

प्लंकर उदाहरण भी देखें

कस्टम घटक के साथ उदाहरण

एओटी संकलन के लिए ये धागे देखें

गिटब वेबपैक एओटी उदाहरण देखें https://github.com/alexzuza/angular2-build-examples/tree/master/ngc-webpack