Question

我已经声明了以下配置器对象。

export class Config {
  constructor(public index: number, public junk: string[] = []) { }
  public count() : number { return this.junk.length; }
}

然后我将它传递到我的组件输入装饰字段（@Input() config : Config;）。

<div *ngFor="let thing of stuff; let config={index:index,junk:junk};">
  <app-thingy [data]="thing"
              [config]="config">
  </app-thingy>
</div>

当我访问this.config时（检查它是否已在ngOnChanges()中设置）我看到我设置的值但我无法访问该方法。我还注意到，构造函数中可能包含的任何其他参数或类中可能的公共字段都不会被看到。基本上，只有HTML标记中明确指定的字段可用。

ngOnChanges(changes: SimpleChanges): void {
  if (changes.config) {
    //console.log((new Config()).count());
    console.log((this.config.count()));
  }
}

注释掉的行会产生错误，说明对象上没有这样的方法。第二行证明它是错误的 - 对象上有这样的方法。我也尝试使用this.config as Config进行投射，但结果相同。

我感觉到我从HTML标记传递的对象根本没有输入Config因此，它没有任何我没有明确指定的方法/变量。因为我不能只在标记中找new Config(...)（按照要求和回复），我不知道如何让愚蠢的计算机相信我它正在处理一个很好实现的类<强大>包括其便利方法。

我该如何处理？

我能想象的最好的方法是构造一个内部Config对象，从传入的对象中复制字段，然后将HTML插值器绑定到该对象。但是，我觉得它确实是愚蠢或错误（可能两者都是）......

Answer 1

我不知道你在代码中使用let config={index:index,junk:junk};试图实现什么，这会引发错误，至少在我刚刚尝试的时候。删除此行并在父级中正确声明新的Config后，您的代码应该可以正常工作。

家长：

config = new Config(1,['one','two'])

父html：

<div *ngFor="let thing of stuff">
  <app-thingy [data]="thing" [config]="config"></app-thingy>
</div>

子：

ngOnChanges(changes: SimpleChanges): void {
  if (changes.config) {
    //console.log((new Config()).count());
    console.log((this.config.count()));
  }
}

这似乎工作得很好！演示：https://stackblitz.com/edit/angular-fnmk41?file=app%2Fapp.component.ts

无法访问传递给Angular组件的@Input字段的对象中的公共方法

1 个答案: