在 Angular 中，我可以使用 @Input 作为事件发射器吗答案

【问题标题】：In Angular can I use @Input as event emitter在 Angular 中，我可以使用 @Input 作为事件发射器吗
【发布时间】：2020-10-24 21:09:51
【问题描述】：

我喜欢探索使用组件 Input 作为 Event 输出的可行性，类似于 react 的做法。

父组件

parentHandler(message){
   console.log(message)
}

父 html

<child [myEvent]="parentHanlder"></child>

子组件

@Input myEvent

ngOnInit(){

this.myEvent('hello')

}

我想知道这种方法是否存在缺点或潜在问题，例如内存/性能

谢谢

【问题讨论】：

这能回答你的问题吗？ Angular 5 Component input function that takes parameters
不完全。我知道输入和输出都有效，我想知道仅使用@input 来处理事件是否存在潜在问题
你能解释一下你为什么需要这个吗？

标签： javascript angular

【解决方案1】：

这种情况下可以使用setter

家长：

<child [myEvent]="parentHanlder"></child>

孩子（ts）：

@Input()
set myEvent(parentHandler: string) {
     this.myEvent('hello');
}

【讨论】：

【解决方案2】：

这将按预期完美运行。

行为将类似于@Output 除了执行的上下文。

执行范围是子组件

export class AppComponent {
 version: number = 7;
  messageMe(param){
    alert("Message Me.."+param+this.version); 
  }
}

<framework
[messageHandler]="messageMe"></framework>


export class FrameworkComponent implements OnInit {
  @Input()
  messageHandler: Function;

  name="Jone";

  ngOnInit() {
    this.messageHandler(this.name);
  }
}

【讨论】：

我知道这些是如何工作的，我想知道这种方法有什么缺点