介绍
在本指南中，我们将学习@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 中最有用的装饰器之一，面试官经常会问到它。你以后很可能会听到这个问题，阅读本指南后，你应该能够回答相关问题。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
