输入与输出事件绑定

Question

我正在寻找一个争论为什么使用@Output事件比在Angular 2+中传递@Input函数更好。

使用@Input：

父模板：

<my-component [customEventFunction]=myFunction></my-component>

在parent-component.ts中：

myFunction = () => {
  console.log("Hello world")
}

在my-component.ts中

@Input() customEventFunction: Function;

someFunctionThatTriggersTheEvent() {
  this.customEventFunction();
}

使用@Output：

父模板：

<my-component (onCustomEvent)=myFunction()></my-component>

在parent-component.ts中：

myFunction() {
  console.log("Hello world")
}

在my-component.ts中

@Output() onCustomEvent: EventEmitter<any> = new EventEmitter<any>();

someFunctionThatTriggersTheEvent() {
  this.onCustomEvent.emit();
}

两者都实现了相同的目标，但我认为@Output方法比我在其他Angular包中看到的更为典型。有人可能会说，使用输入，如果只能有条件地触发事件，您可以检查函数是否存在。

思考？

Answer 1

@Output事件绑定的优点：

1. 使用@Output定义事件清楚地表明它期望回调方法使用标准的Angular机制和语法来处理事件。
2. 许多事件处理程序可以订阅@Ouptut事件。另一方面，如果定义一个接受回调函数的@Input属性，则只能注册一个事件处理程序;分配第二个事件处理程序将断开第一个事件处理程序。为了与标准DOM事件处理程序并行，@ Input回调函数绑定类似于设置onmousemove="doSomething()"，而@Output事件绑定更像是调用btn.addEventListener("mousemove", ...)。

Answer 2

功能上基本上有no differences，但是

（i）当你使用@input时，你可以使用@Input，我们可以定义类型，无论是私人还是公共

（ii）正如评论中提到的@ConnorsFan，使用@Ouput的优点是许多订阅者可以处理Output事件，而只能为@Input属性提供一个处理程序。

Answer 3

@ Sajeetharan的回答实际上并不完全正确：存在重大的功能差异：执行上下文。考虑这种情况：

@Component({
  selector: 'app-example',
  template: `<button (click)="runFn()">Click Me</button>`,
})
export class ExampleComponent {
  @Input() public fn: any;

  public runFn(): void {
    this.fn();
  }
}

@Component({
  selector: 'app',
  template: `<app-example [fn]="myFn"></app-example>`,
})
export class AppComponent {
  public state = 42;

  // Using arrow syntax actually *will* alert "42" because
  // arrow functions do not have their own "this" context.
  //
  // public myFn = () => window.alert(this.state);

  public myFn(): void {
    // Oops, this will alert "undefined" because this function
    // is actually executed in the scope of the child component!
    window.alert(this.state);
  }
}

这实际上使用@Input()属性传递函数非常尴尬。至少它打破了最少惊喜的原则，可以引入偷偷摸摸的错误。

当然，有些情况下您可能不需要上下文。例如，您可能有一个可搜索的列表组件，它允许将复杂数据作为项目，并且需要传递fnEquals函数，以便搜索可以确定搜索输入文本是否与项目匹配。然而，这些情况通常由更可组合的机制（内容投影等）更好地处理，这增加了可重用性。