使用 @output 从嵌套组件传递数据

2019-11-25 08:00:00 · 飞浪

介绍在本指南中，我们将学习@Output()。它是Angular中最有用的装饰器之一，它有助于将数据从子组件发送到父组件。 @Output()简介装饰器使用事件绑定将

介绍

在本指南中，我们将学习@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 中最有用的装饰器之一，它有助于将数据从子组件发送到父组件。希望您从本指南中学到了一些新东西。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 @output 从嵌套组件传递数据

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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"); } }

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 ); } }