使用 @Input 将数据传递给嵌套组件

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

介绍在本指南中，我们将学习@Input()。它是Angular中最有用的装饰器之一，它将数据发送到组件并帮助您从父组件获取所需的数据。我们将在以下部分中讨论有关此装饰器的更多信息。

介绍

在本指南中，我们将学习@Input()。它是 Angular 中最有用的装饰器之一，它将数据发送到组件并帮助您从父组件获取所需的数据。我们将在以下部分中讨论有关此装饰器的更多信息。

关于@Input()

此装饰器将字段标记为输入并提供配置元数据。它用于告诉组件此字段数据将来自父级数据。它在调用 ngOnInit ()方法之前接收数据，因此您可以在ngOnInit()方法中使用它。

ngOnInit()是 Angular 中的生命周期钩子之一，在构造函数()和ngOnChanges()方法之后调用。您可以在此处了解有关 Angular 生命周期钩子的更多信息。

需要@Input()

@Input()用于组件之间的交互。Angular 具有不同类型的组件间交互，但@Input()用于在父子类型的组件之间进行交互。我们可以通过多种方式将一个组件与另一个组件进行交互。您可以使用以下一些方法与组件进行通信：

使用服务
@viewChild()

@Input()主要用于父子层级比较小的情况，如果层级比较大，建议使用服务。

如何使用@Input()

现在我们将深入研究编码部分，以便您更好地了解如何使用@Input()。

首先，我们要制作两个组件。打开cmd，转到项目文件夹路径，然后输入以下命令。

      ng g c components/parent --skipTests=true
ng g c components/child --skipTests=true
    

我们已经成功创建了组件。现在是时候使用@Input()装饰器了。

应用程序.组件.html

      <app-parent></app-parent>

在app.component.html中，我们调用父组件。

父组件.html

      <app-child [parentData]="data" [data]="data"></app-child>

在父组件中，我们调用子组件。但是您可以在<app-child>组件中看到一些附加属性。这是因为我们将在<app-child>组件中使用 @Input()。

@Input() 装饰器将告诉组件该字段来自父组件。您可能注意到我们写了parentData和data，这是 app-child 的属性，因为它位于方括号 ('[]') 下。这是因为我们必须将动态数据设置为 parentData和data属性，这些数据将来自组件的类文件。因此，我们传递在父组件中实例化和初始化的数据。您可以在以下代码中看到这一点：

父组件.ts

      import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.scss"]
})
export class ParentComponent implements OnInit {
  data: string;
  constructor() {}

  ngOnInit() {
    this.data = "Hii from parent";
  }
}
    

正如您在ngInInit()方法中看到的，我们设置了将在 HTML 文件中获取的数据的值，并设置了parentData和数据。

现在我们已经完成了父端代码。父端不再需要任何代码来将数据从父端发送到子端。现在让我们看看子端的代码。

子组件.html

      {{parentData}}<br />
{{modifiedName}}
    

在 child.component.html 中，我们绑定来自 child.component.ts 的数据以在子组件中打印。

子组件

      import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.scss"]
})
export class ChildComponent implements OnInit {
  @Input() parentData;
  @Input("data") modifiedName;

  constructor() {}

  ngOnInit() {
    console.log("This is the parent data", this.parentData);
    console.log("This is the parent data", this.modifiedName);
  }
}
    

这看起来像魔术，我们需要更多地关注代码的这一部分。

我们使用@Input()装饰器从父级获取数据。您可能想知道为什么我们为 @Input() 编写了两种不同的语法——即@Input()和@Input("data")。这是因为如果我们必须在子类中使用相同的名称，即与属性名称相同，我们必须将其写入parent.component.html中的app-child标记中，这样我们就不必在@Input()中传递任何内容。它将默认搜索与子组件的变量名匹配的名称。

但是如果我们必须对属性使用不同的名称，对变量使用不同的名称，那么我们需要在@Input()中传递属性名称，在我们的例子中就是数据。

我们的输出看起来会像这样：

记住，我说过@Input()字段在调用ngOnInit()方法之前获取数据。因此，我将数据打印在控制台中，如下所示。

概括

组件和嵌套组件之间的交互是中大型 Web 应用程序中的必备功能。@Input()是 Angular 中最有用的装饰器之一，面试官经常会问到它。你以后很可能会听到这个问题，阅读本指南后，你应该能够回答相关问题。

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

_查看原文

技术指南

阅读全文

使用 @Input 将数据传递给嵌套组件

杭州电子商务研究院

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

import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-parent", templateUrl: "./parent.component.html", styleUrls: ["./parent.component.scss"] }) export class ParentComponent implements OnInit { data: string; constructor() {} ngOnInit() { this.data = "Hii from parent"; } }

import { Component, OnInit, Input } from "@angular/core"; @Component({ selector: "app-child", templateUrl: "./child.component.html", styleUrls: ["./child.component.scss"] }) export class ChildComponent implements OnInit { @Input() parentData; @Input("data") modifiedName; constructor() {} ngOnInit() { console.log("This is the parent data", this.parentData); console.log("This is the parent data", this.modifiedName); } }