代码示例：

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中监听(event)：<app-tutorials(event)="doSomething($event)"></app-tutorials>
当从子组件发出event时，doSomething($event)函数被触发并在$event

问题：

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

Answer 1

我目前的理解是否正确？

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

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

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

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

Angular5 @output装饰器

代码示例：

问题：

1 个答案: