NG4 componentFactory डोम लक्ष्य

Question

मैं

मैं एक वोट कास्टिंग प्रणाली है, जो वेबसाइट भर के कई घटकों में दोबारा इस्तेमाल किया जाएगा पर काम कर रहा हूँ करने के लिए कोशिश कर रहा हूँ क्या में रखने से। इसे शुष्क रखने के लिए, मैं किसी भी घटक से नामित घटक को नामित डीओएम तत्व में बनाना चाहता हूं .. घटक बनने के बाद, आवृत्ति चर सेट किया जाना चाहिए (इस मामले में model:string और pk:number, दोनों सार्वजनिक)।

अपेक्षित परिणाम

मैं घटक नामित स्थान में प्रदान करने, सही डेटा जो सही होने के बाद कारखाने घटक बनाया गया है स्थापित किए गए हैं मुद्रण की उम्मीद है। वोट के तल पर उत्पादन किया जाना चाहिए Model: project PK: 1

वास्तविक स्थिति

ComponentFactory वर्तमान में घटक कारखाने द्वारा बनाई मतदान घटक के दो आउटपुट है: सही स्थान पर

1. (लक्षित div), लेकिन सेट इंस्टेंस चर के बिना।

2. पृष्ठ के निचले हिस्से में, लेकिन बाद में और किसी अन्य विषय में यह एक अन्य समस्या है।

कुछ कोड

@NgModule({ 
    .. 
    declarations: [ 
     AppComponent, 
     ProjectComponent, // parent for voteContainer 
     VoteComponent, // Dynamic component 
    ], 
    entryComponents: [ 
     VoteComponent, 
    ], .. 
}) 

माता पिता VoteComponent कारखाने युक्त घटक

export class ProjectDetailComponent implements AfterViewInit { 
    @ViewChild('voteComponentContainer', {read: ViewContainerRef}) voteComponentContainer; 

    public ngAfterViewInit() { 
     this.factoryVoteComponent(); 
    } 

    private factoryVoteComponent() { 
     const voteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(VoteComponent); 
     const voteComponentRef = this.viewContainerRef.createComponent(voteComponentFactory); 
     voteComponentRef.instance.model = "project"; 
     voteComponentRef.instance.pk = 1; 
     voteComponentRef.changeDetectorRef.detectChanges(); 
    } 
} 

गतिशील घटक लक्ष्य:

<vote-component-container></vote-component-container> 

बेसिक मतदान घटक

@Component({ 
    selector: 'vote-component-container', 
    templateUrl: 'vote.component.html', 
}) 

export class VoteComponent { 
    public model:string; 
    public pk:number; 
    public constructor(){} 
} 

मैं

क्या कोशिश की है मैं अब काफी कुछ समय के लिए इस के साथ संघर्ष कर रहा है, इसलिए वहाँ काफी कुछ प्रयास यह काम करने के लिए मिल रहे हैं। फैक्ट्री के लिए व्यूचल्ड बनाने के साथ अंतिम प्रयास था।

कि इसके अलावा, मैं नाम, घटक के टेम्पलेट रिसीवर स्थापित करने के विभिन्न तरीकों, आदि के साथ प्रयोग करना किया गया है

क्या मैं

पूछने के लिए किसी के साथ किसी भी अनुभव है चाहता हूँ स्थिति के लिए गतिशील घटकों का उपयोग अब मैं कोशिश कर रहा हूँ? मैं सही दिशा में प्रस्तुत किए जा रहे घटक के मुद्दे को ठीक करने के तरीके पर सही दिशा में एक धक्का पर उम्मीद कर रहा था लेकिन उपलब्ध विशेषताओं के बिना।

Answer 1

कुछ और शोध के बाद, परीक्षण विफल रहा और कुछ और कोशिश कर रहा है - मुझे यह एक समाधान मिला है।मैं अभी तक 100% संतुष्ट नहीं कर रहा हूँ, क्योंकि यह एक छोटे से कम शुष्क और संगठित हो जाता है - लेकिन अभी के लिए:

सबसे पहले मैं गतिशील रूप से उत्पन्न घटक करने के लिए अपने डेटा पास करने का तरीका को समायोजित करने के लिए किया था। मुझे आवश्यक गुणों को स्वीकार करने के लिए अपने चयनकर्ता लक्ष्य को अपडेट करना पड़ा। मेरे मामले में model और objectId।

<vote-component-container [model]="'project'" [objectId]="projectId"></vote-component-container> 

VoteComponent के लिए इस डेटा लिंक करने के लिए, VoteComponent की तरह ही इन आंकड़ों आदानों के लिए @Input setters की जरूरत है:

import { Input, Component, AfterViewInit } from '@angular/core'; 

@Component({ 
    selector: 'vote-component-container', 
    templateUrl: 'vote.component.html', 
}) 

export class VoteComponent implements AfterViewInit { 
    // Temp public for testing 
    public _objectId:number; 
    public _model:string; 

    public constructor(){} 
    public ngAfterViewInit(){ 
     this.getVotes(); 
    } 

    @Input('objectId') 
    set objectId(objectId:number){ 
     this._objectId = objectId; 
    } 

    @Input('model') 
    set model(model:string){ 
     this._model = model; 
    } 

    public getVotes(){ 
     ... 
    } 
} 

और अंत में मेरे माता-पिता घटक में, मैं उम्मीद पैरामीटर [ 'आईडी'] अनुभाग था जब समारोह ngAfterInit में बुलाया गया था। लेकिन उसने ऐसा नहीं किया, तो मैं आप VoteComponent में एक डिफ़ॉल्ट मान के साथ चर प्रारंभ तो वादा के लिए इंतजार करना ..

@ViewChild('voteComponentContainer', {read: ViewContainerRef}) target: ViewContainerRef; 
private factoryVoteComponent(){ 
    this.activatedRoute.params.subscribe((params: Params) => { 
     this.model = 'project'; 
     this.projectId = params['id']; 

     let voteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(VoteComponent); 
     this.voteComponentRef = this.viewContainerRef.createComponent(voteComponentFactory); 
     this.voteComponentRef.changeDetectorRef.detectChanges(); 
    }); 
}