Bir öğeden çağrılan birden çok açısal 4 yönergesi

Question

giriş değerlerini karşılaştırdı Üç kat olarak adlandırılan açısal 4'te bir bileşenim var. Şablon meta verilerinde, bu gibi bazı bağlarla direktifli bir div var.

@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 sonra yönergede bu var, her bileşen örneği için değiştirin:

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); 
    } 
} 

sorun bileşeni ile cOptions ayarladığınızda console.log(this.cOptions); bile her zaman aynı nesneyi yazdırmak olmasıdır Bileşenin ngOnInit yöntemindeki farklı değerler.

Neyin yanlış olduğuna dair bir fikriniz var mı?

Answer 1

Bileşen özellik bağlantılı [cOptions]="dataChart"'unuz düzgün görünmüyor, neden dataChart numaranız tanımlı değil. [DIRECTIVE_PROPERTY]="COMPONENT_PROPERTY" gibi olmalı ve COMPONENT_PROPERTY ürününüz SGComponent bileşen sınıfında bile tanımlanmamıştır.

@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 sizin koduyla birlikte geçerli sorunu işaret:

Kişisel bileşen sınıfı böyle bir şey olması gerekir. Şablonunuzun bir şeyleri kablolaması, hiçbir zaman SGDirective girişine hiçbir şey geçmeyecek.

Karşılaştığınız başka bir olası sorun da gServ koduyla ilgilidir. gServ tekil (büyük olasılıkla durum böyle) ise ve SGComponent s'nin her birine aynı nesneyi döndürüyorsa, tüm SGDirective s aynı değere sahip olacaktır. Bunu sınamanın basit bir yolu, 'un SGComponent şablonuna yerleştirilmesidir.

Eğer @Component meta verilere bir providers dizi ekleyebilir her SGComponent için gServ hizmetin yeni bir örneğini oluşturmak için. Bu şuna benzer:

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

Sen this.gServ.objectMerge) de muhtemelen aynı dönüş/değere sahip

@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 
 

 
    } 
 
}

(servisini çağırmak ve sizin tarafınızdan her biri tek farklı objet markasını geçen wihtout bunu test edebilirsiniz) bu durumda

, senin sorunun gServ aynı rootComponent de temin olmasıdır. aynı rootComponent de açısal, servis sağlayıcı ile singleton vardır.

Yönergenizde ve bileşeninizde aynı türü kullanın!