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将具有相同的值。测试此方法的一种简单方法是将{{Options | json}}放入SGComponent模板。

要为每个gServ创建SGComponent服务的新实例，您可以向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。

在指令和组件中使用相同的类型!!

从组件调用的多个角度4指令实例补充了输入值

3 个答案: