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事件绑定的优点：

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

Answer 2

功能上基本上有 require 'test_helper' require 'capybara/poltergeist' class ApplicationSystemTestCase < ActionDispatch::SystemTestCase driven_by :poltergeist end ，但

（i）当您使用 no differences 时，您可以使用 @input ，我们可以定义类型以及是否为私有或公开

（ii）在评论中提及 @Input ，使用 @ConnorsFan 的优势是许多订阅者可以处理输出事件，而只有可以为 @Ouput 属性提供一个处理程序。

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函数，以便搜索可以确定搜索输入文本是否与项目匹配。然而，这些情况通常由更可组合的机制（内容投影等）更好地处理，这增加了可重用性。

输入与输出事件绑定

3 个答案: