從組件調用的多個角度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); 始終打印相同的對象，即使組件在組件的ngOnInit方法中設置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將具有相同的值。 測試這個的一個簡單方法是放置{{Options | json}} SGComponent模板中的{{Options | json}} 。

要為每個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)有相同的返回值/值（你可以在沒有調用服務的情況下測試它，然后通過你傳遞每一個不同的對象）

 @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是在同一個rootComponent上提供的。 與angular，同一rootComponent的服務提供者是singleton。

並在指令和組件中使用相同的類型！