Question

在Angular 2中，你使用this工作很多，这很好，但我发现当你想在组件层次结构中传递一个函数时，它也会产生一个问题。

以此为例：

export class ParentComponent {

  myFunctionFromParent() {
    this.isActive = true;
  }
}

然后我们将此功能传递给孩子：

<parent>
  <child [onClick]="myFunctionFromParent"></child>
</parent>

让我们说child是一个简单的按钮：

<button (click)="onClick()"></button>

现在，当myFunctionFromParent运行时，this应该是ParentComponent，但事实并非如此。

相反，ChildComponent会更改this.isActive属性。

这会产生很多问题，因为您无法从子组件执行父函数并期望父属性发生更改。

传递函数的工作方式与您在Angular 1中的预期相同，但现在看起来已经坏了。

这不再是这样做的方式吗？ Angular 2中正确的方法是什么？

Answer 1

我会改用它：

<parent>
  <child (onClick)="myFunctionFromParent()"></child>
</parent>

并在子组件中定义@Output：

@Component({
  selector: 'child',
  template: `
    <button (click)="onClick()"></button>
  `
})
export class ChildComponent {
  @Output('onClick')
  eventHandler:EventEmitter<any> = new EventEmitter();

  onClick() {
    this.eventHandler.emit();
  }
}

Answer 2

使用默认的Angular数据绑定输入和输出，而不是传递函数：

class ParentComponent {
  myFunctionFromParent() {
    this.isActive = true;
  }  
}

class ChildComponent {
  @Output() onClick = new EventEmitter();
}

<parent>
  <child (onClick)="myFunctionFromParent()"></child>
</parent>

<button (click)="onClick.emit()"></button>

从子项执行父函数不会更新父项的属性

2 个答案: