एक घटक से बुलाए गए कोणीय 4 निर्देश का एकाधिक उदाहरण इनपुट मान

Question

मेसेड किया गया है मेरे पास कोणीय 4 में एक घटक है जिसे तीन बार कहा जाता है। टेम्पलेट मेटाडाटा में मेरे पास इस तरह के कुछ बाइंडिंग के साथ निर्देश के साथ एक div है।

@import {gServ} from '../gServ.service'; 

@Component: ({ 
    selector: 'sr-comp', 
    template: `<div gDirective [cOptions]="dataChart">` 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    cOptions:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 

     this.cOptions = {}; 
     this.cOptions = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 

     //this.report.opt is binded to a component when is instantiated. 
     //this.gServ.objectMerge is a function that merge the two objects 
    } 
} 

this.cOptions घटक के प्रत्येक उदाहरण के बदलने के लिए, तो निर्देश में मैं इस है:

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[gDirective]' 
}) 
export class SGDirective implements OnInit { 
    public _element: any; 
    @Input() public cOptions: string; 

    constructor(public element: ElementRef) { 
    this._element = this.element.nativeElement; 
    } 

    ngOnInit() { 
    console.log(this.cOptions); 
    } 
} 

समस्या यह है कि console.log(this.cOptions); हमेशा एक ही वस्तु प्रिंट, तब भी जब घटक के साथ cOptions सेट किया गया है घटक की ngOnInit विधि में अलग-अलग मान।

क्या आपको कुछ पता है कि क्या गलत है?

Answer 1

आपकी घटक संपत्ति बाध्यकारी [cOptions]="dataChart" अच्छा नहीं लग रहा है, क्योंकि आपका dataChart भी परिभाषित नहीं किया गया है। यह [DIRECTIVE_PROPERTY]="COMPONENT_PROPERTY" जैसा होना चाहिए और COMPONENT_PROPERTY को SGComponent घटक वर्ग में भी परिभाषित नहीं किया गया है।

@import {gServ} from '../gServ.service'; 

@Component: ({ 
    selector: 'sr-comp', 
    template: `<div gDirective [cOptions]="Options">` 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    Options:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 
     this.Options = {}; 
     this.Options = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 
    } 
} 

Answer 2

@Ashwani अपने कोड के साथ एक वैध समस्या बताते हैं:

आपका घटक वर्ग कुछ इस तरह होना चाहिए। जिस तरह से आपका टेम्पलेट चीजें तारों को तारित कर रहा है, कुछ भी SGDirective इनपुट में कभी भी पारित नहीं किया जाएगा।

एक और संभावित समस्या जिसे आप चल रहे हैं gServ कोड के साथ करना है। यदि gServ एक सिंगलटन (जो शायद मामला है) है और यह SGComponent एस में से प्रत्येक ऑब्जेक्ट को वापस कर रहा है, तो सभी SGDirective एस के समान मूल्य होगा। इसका परीक्षण करने का एक आसान तरीका SGComponent टेम्पलेट में रखना है।

प्रत्येक SGComponent के लिए gServ सेवा का एक नया उदाहरण बनाने के लिए आप providers सरणी @Component मेटाडेटा में जोड़ सकते हैं। यह इस तरह दिखेगा:

import {gServ} from '../gServ.service'; 

@Component({ 
    selector: 'sr-comp', 
    template: `{{Options | json}}<div gDirective [cOptions]="Options"></div>` 
    providers: [gServ], 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    Options:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 
     this.Options = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 
    } 
} 

Answer 3

आप शायद ही वापसी/this.gServ.objectMerge) पर मूल्य (wihtout सेवा को फोन, और आपके द्वारा हर एक एक अलग objet कर गुजर आप इसे परीक्षण कर सकते हैं)

@import {gServ} from '../gServ.service'; 
 

 
@Component: ({ 
 
    selector: 'sr-comp', 
 
    template: `<div gDirective [cOptions]="dataChart">` 
 
}) 
 

 
export class SGComponent implements OnInit { 
 
    //@Input('report') public report: IReportInstance; 
 
    cOptions:any; 
 

 
    constructor(private gServ: gServ) { 
 
    } 
 

 
    ngOnInit(){ 
 

 
     this.cOptions = {nicolas: 'nicolas1'}; //change this in the next component that use the directive 
 

 
    } 
 
}

यदि ऐसा है, तो आपकी समस्या यह है कि gServ एक ही रूटकंपोनेंट पर प्रदान किया जाता है। कोणीय के साथ, एक ही रूट पर सेवा प्रदाता कॉम्पोनेंट सिंगलटन हैं।

और उसी प्रकार का उपयोग अपने निर्देश और अपने घटक में करें !!