Angular5 @output 装饰器答案

【问题标题】：Angular5 @output decoratorAngular5 @output 装饰器
【发布时间】：2017-11-15 16:58:04
【问题描述】：

你好，学习 angular 并遇到了 angular 中的 @output 装饰器。在研究了这个主题之后，我仍然很难理解这个概念。

代码示例：

app.component.html:

<app-tutorials(event)="doSomething($event)"></app-tutorials>

app.component.ts:

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  doSomething(event){
    alert("being executed");
  }
}

tutorial.component.html：

<button (click)="beingClicked($event)"_>click me</button>

tutorial.component.ts：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-tutorials',
  templateUrl: './tutorials.component.html',
  styleUrls: ['./tutorials.component.css']
})
export class TutorialsComponent{

  @Output() event = new EventEmitter();

  beingClicked(event){
    this.event.emit(event);
  }
}

我目前的理解是这样的，如果我错了，请纠正我：

output 用于仅从父组件的子组件传输数据。
当按钮被点击时，beingClicked(event) 被触发并通过 $event 的参数传递事件信息。
我们可以使用this.event.emit(event); 发出事件，因为我们首先在类的前面使用以下语句实例化了事件：@Output() event = new EventEmitter();
现在父组件在app.component.html:<app-tutorials(event)="doSomething($event)"></app-tutorials>中监听(event)
当event 从子组件发出时，doSomething($event) 函数被触发并传入$event

问题：

我目前的理解正确吗？
这个 EventEmitter 到底是什么？向上数据是否总是需要它？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我目前的理解正确吗？

你的理解是正确的。还有其他方法可以共享数据，但通知父级需要对此做出反应的事件是适当的方法。有关组件交互的更多详细信息/示例，另请参阅文档Parent listens for child event。

这个 EventEmitter 到底是什么，是否总是需要向上数据？

EventEmitter 是其他代码（组件、服务等）可以订阅的事件。然后，EventEmitter 的所有者可以在适当的时候使用数据触发事件，并且订阅事件的代码可以决定如何处理调用，或者如果不相关，则将其全部忽略。另见Event-driven Programming。

它不一定只用于上游（子到父），它也可以通过共享服务依赖或下游（也使用共享服务依赖）进行水平（子到子）通信，以便子组件可以决定如何处理由父组件触发的事件。

【讨论】：