介绍
在本指南中，我们将学习@Output()。它是 Angular 中最有用的装饰器之一，它有助于将数据从子组件发送到父组件。
@Output() 简介
装饰器使用事件绑定将事件发送到父组件。父组件应该有一个函数来接受从子组件发出的数据。它在调用ngOnInit()方法之前获取数据。
ngOnInit()是 Angular 中的生命周期钩子之一，它在构造函数()和ngOnChanges()方法之后调用。您可以在此处了解有关 Angular 生命周期钩子的更多信息。
需要@Output()
@Output()用于组件之间的交互。Angular 中的组件之间存在不同类型的交互，但@Output()专门用于父组件和子组件之间的交互。我们可以通过多种方式使一个组件与另一个组件交互。其中两种包括：
- 使用服务
- 使用@viewChild()
但是，如果父级和子级之间的层次结构较小，则使用@Output()。如果层次结构较大，我建议您使用服务。
如何使用@Output
现在我们将深入指南的编码部分，让您更好地了解如何使用@Output()。
首先，我们将制作两个组件。启动 cmd并转到项目文件夹并输入以下命令：
$ ng g c components/parent-output --skipTests=true
$ ng g c components/child-output --skipTests=true
我们已经成功创建了组件；现在是时候使用@Output()装饰器了。
应用程序.组件.html
<app-parent-output></app-parent-output>
在 app.component.html 中我们将调用父组件。
子输出.组件.ts
import { Component, OnInit, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-child-output",
templateUrl: "./child-output.component.html",
styleUrls: ["./child-output.component.scss"]
})
export class ChildOutputComponent implements OnInit {
@Output() demo = new EventEmitter<string>();
constructor() {}
ngOnInit() {
this.demo.emit("This is the child component");
}
}
child-output.component.html中不需要任何代码。我们只需要从子组件发送数据，这可以通过使用@Output()装饰器和EventEmitter类来实现；它们都包含在@angular/core包中。
EventEmitter是一个用于发出自定义事件的类，仅与@Output()装饰器一起使用。它扩展了Subject类，后者用于应用提供者-订阅者类型的通信。Subject是Observable的一部分，您可以在此处阅读更多相关信息。
在上面的代码片段中，我们创建了一个demo变量，该变量以@Output()为首，并由EventEmitter实例化。EventEmitter接受我们需要在括号(<>)中传递的数据类型。在我们的例子中，我们为父组件提供了一个字符串。
我们的子组件已准备好发出事件，因此我们调用emit方法，它是EventEmitter类的方法。
在子组件的ngOnInit()方法中，我将调用emit方法。从子组件传递的数据需要在父组件中访问，为此我们需要事件绑定。
父输出.组件.html
<app-child-output (demo)="acceptData($event)"></app-child-output>
在父组件中，我们刚刚调用了子组件。要从子组件访问数据，我们必须进行事件绑定。事件名称必须是我们的变量名称，它由EventEmitter类实例化。要接受从子组件传递的数据，我们需要在parent-output.component中定义一个函数并在app-child-output选择器中调用它，如您在上面的代码片段中看到的那样。$event是必须使用的，因为它从子组件获取数据并将其传递给父函数。
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-parent-output",
templateUrl: "./parent-output.component.html",
styleUrls: ["./parent-output.component.scss"]
})
export class ParentOutputComponent implements OnInit {
constructor() {}
ngOnInit() {}
acceptData(data) {
console.log(
"this is the child data displaying in parent component: ",
data
);
}
}
在上面的代码中，我们创建了一个在子组件选择器中调用的函数。data是存储来自子组件的数据的参数。
我们运行这个项目之后，可以在控制台看到以下输出：
您可以看到数据如何从父组件成功传递到子组件，我们在parent-output.component.ts第 15 行显示输出。
现在您已经成为使用@Output()装饰器的大师了。
结论
@Output()是 Angular 中最有用的装饰器之一，它有助于将数据从子组件发送到父组件。希望您从本指南中学到了一些新东西。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
