javascript - 从组件调用的 Angular 4 指令的多个实例弄乱了输入值

Question

我有一个 Angular 为 4 的组件，它被调用了三次。在模板元数据中，我有一个带有指令的 div，其中包含一些像这样的绑定(bind)。

@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 也是如此 组件的方法。

你知道哪里出了问题吗？

Answer 1

您的组件属性绑定(bind) [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);
    }
}