让我们开发一个 Angular 应用程序 – Angular 组件通信

作者 : 慕源网 本文共1018个字,预计阅读时间需要3分钟 发布时间: 2022-01-9 共21人阅读

这是我的“让我们开发一个 Angular 应用程序”系列文章的第 5 篇文章。

请阅读我的前两篇文章,了解我们在本系列文章中要完成的工作。

要阅读我之前的文章,请点击这里 >>  #4 – 为我们的 Bike 实体创建模型

在本文中,我们将执行以下任务:

  • 将 ‘bikeEl’ 变量中的每个数组项从 app 组件转移到子组件 ‘bike-list-box’
  • 在 bike-list-box 组件中显示每个自行车对象的详细信息

在这里,我们将熟悉 @Input() 装饰器。

@Input 装饰器将类字段标记为输入属性。

输入属性绑定到模板中的 DOM 属性。在变更检测期间,Angular 会使用 DOM 属性的值自动更新 data 属性。

参考:https : //angular.io/api/core/Input

@Input() 装饰器可用于将数据从父组件传递给子组件。

首先,我们需要在 bike-list-box.component 文件中创建变量。

然后使用 @Input() 装饰器将变量转换为输入属性。

@Input() bike:Bike;    

请参考下面的截图。

让我们开发一个 Angular 应用程序 - Angular 组件通信

然后,编辑“bike-list-box.component.html”以显示自行车详细信息。

我们可以使用字符串插值 {{}} 功能将数据从类变量显示到模板文件。

请参阅以下 html 语句以显示自行车详细信息。

<div>    
    <h4>Bike Name : {{bike.name}}</h4>    
    <h5>Company:{{bike.company}}</h5>    
    <p>Price:{{bike.price}}</p>    
    <p>Top Speed :{{bike.topspeed}} Kmph</p>    
    <hr>       
</div> 

现在,我们的自行车列表框组件已准备好接受来自其父级的输入并在输入中显示详细信息。

下一步是将数据从父组件传递到子组件。

再次打开 app.component.html 文件。

我们可以使用属性绑定将数组元素传递给 bike-list-box 组件。

[bike]="bikeEl"   

请参阅屏幕截图以获得清晰的图片。

让我们开发一个 Angular 应用程序 - Angular 组件通信

保存所有更改并转到浏览器查看结果。

如果一切正确,我们将看到如下屏幕。

让我们开发一个 Angular 应用程序 - Angular 组件通信

结论

在本文中,我们使用了 @Input() 装饰器将数据从父组件传输到子组件。

在这里,我们使用 ngFor 语句多次复制了 bike-list-box 组件。

在下一篇文章中,我们将安装 Bootstrap 并使用基本的引导样式类来改进 UI。

要阅读我的下一篇文章,请点击这里 >>  #6 – Bootstrap 安装和使用


慕源网 » 让我们开发一个 Angular 应用程序 – Angular 组件通信

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

发表评论

开通VIP 享更多特权,建议使用QQ登录