Question

我将一个函数作为子组件的输入传递。回调访问子组件的成员并切换值：

rowAction(contact) {
  this.currentlySelectedValues.toggle(contact.id);
}

函数本身有效，但Angular编译器抱怨是因为：

error TS2339: Property 'currentlySelectedValues' does not exist on type 'SelectListTabComponent'.

我知道在声明时currentlySelectedValues this上不存在<child-component [rows]="dataService" [initiallySelectedValues]="initiallySelectedValues" [columns]="displayColumnsObjects" [select]="true" [multiSelect]="multiSelect" (selectionChanged)="onSelectionChange($event)" [rowClickAction]="rowAction"> </child-component>，但是一旦传递了函数，它就会得到正确的范围。

有更好的/其他方式吗？这在生产中不起作用，因为编译器不会构建它。

编辑：

我像这样传递函数：

  @Input() rowClickAction: Function;

在子组件中，我得到它：

  doRowClickAction(row: any): void {
    if (this.rowClickAction) {
      this.rowClickAction(row);
    }
  }

最后，我检查了组件是否已经通过了一个（因为它可能没有设置）

{{1}}

Answer 1

根据this.currentlySelectedValues =0中变量的类型声明this.currentlySelectedValues = ""或ngOninit()。然后编译器可以在调用之前检测有效属性。

Answer 2

在这种情况下，您应该使用@Output属性，就像评论中指出的那样

儿童

@Output() rowClickedEvent = new EventEmitter<any>(); doRowClickAction(row: any) { if(this.rowClickedEvent) { this.rowClickedEvent.emit(row); } }

家长（html）

<child (rowClickedEvent) = "onRowEvent($event)"

家长（ts）

onRowEvent(row) { this.valueFromEvent = row; }

这样，您对this和上下文没有任何问题。

注意

仅供参考，如果您真的希望使用Input属性使其工作，您可以修改您的父组件以声明这样的回调方法

rowAction = (contact) => { this.currentlySelectedValues.toggle(contact.id); }

使用这种声明将保留调用上下文，因此this将引用父组件而不是子组件。但你真的应该参加@Output次活动

这是显示两种方法的stackblitz demo

Angular 4使用＆＃34;这个＆＃34;在儿童范围内

2 个答案: