让我们开发一个 Angular 应用程序 – 在 Bike-details 组件中显示自行车详细信息
介绍
本文介绍如何通过单击组件将数据从一个组件传递到另一个组件。在这里，我们将看到 Angular 中自定义事件绑定的使用。到目前为止，我们已经创建了一个 Angular 应用程序和一些组件，为我们的 Bike 实体创建了一个模型类，并创建了一组硬编码的 Bike details。然后，我们使用 ngFor 在硬编码数组中显示了自行车的详细信息。此外，我们还安装并应用了一些bootstrap classes来改进 UI。我们还创建了一个带有虚拟菜单的导航栏。
这是我的“让我们开发一个 Angular 应用程序”系列文章的第 9 篇文章。
请阅读之前的文章，以全面了解我们正在努力实现的目标。
要阅读我之前的文章，请单击此处 >> #8 – 为 Bikes 创建详细视图组件模板
目前，我们的应用程序 UI 如下图所示：
我们的下一个操作项是将自行车详细信息从bike-list组件传递到bike-details组件。我们需要使用来自bike tile组件的正确数据填充上面屏幕截图中的空自行车详细信息模板。为此，我们需要进行以下活动：
- 创建一个自定义事件以在bike-list-box组件中发出所选自行车的详细信息。
让我们创建自定义事件。
打开 bike-list-box.component.ts 文件
为此，我们可以使用 @Output() 装饰器和 EventEmitter 类。
让我们提供事件的名称为“selectedBike”。
以下语句用于创建事件。
@Output() selectedBike=new EventEmitter<void>();我们应该从 @angular/core 导入 EventEmitter，Output 类
接下来，我们必须创建一个方法来在单击自行车框时发出/触发我们的自定义事件。
让我们将方法命名为“selectBike”。
selectBike()
{
this.selectedBike.emit();
} 请参阅下面的屏幕截图以查看文件中的新更改：
接下来，我们需要在单击自行车块时执行方法 selectBike()。因此，为自行车列表框添加一个点击监听器。
打开 bike-list-box.component.html 文件。
添加点击事件监听并调用方法selectBike()，如下图：
到目前为止，我们已经创建了自定义事件，它会在我们单击每个自行车图块时发出。
- 接下来，在单击每个自行车图块时，我们需要将选定的自行车详细信息传递给应用程序组件。
为此，我们需要创建一个新变量来分配选定的自行车应用内组件。
打开 app.component.ts 文件。
声明一个 Bike 类型的变量 selectedBike
selected Bike: Bike;
请参阅屏幕截图以查看新增内容：
接下来，我们必须将此变量分配给选定的bike 对象。
打开文件 app.component.html
在这里，我们使用事件绑定将数据传递给应用程序组件。
更多阅读>> https://angular.io/guide/user-input
请参阅屏幕截图以查看新更改：
在上面的屏幕截图中， selectedBike 是为 bike-list-box 组件创建的自定义事件。
当该事件触发时，app组件中的方法sendDetails()方法将被执行。
我们将选定的自行车对象作为方法参数传递。
通过使用该方法，我们分配所选择的bike 对象，其创建了一个2的应用程序组件变量selectedBike。
在 app.component.ts 中创建方法 sendDetails()
创建方法并将选定的bike 对象分配给应用程序组件变量 selectedBike。
请参阅屏幕截图以查看 app.component.ts 文件中的新更改。
将selectedBike 数据从应用程序组件传递到bike-details组件。
我们可以使用 *ngIf 语句来检查是否选择了bike 。
如果选中，我们需要在bike-details组件中显示详细信息。
如果没有选择任何bike ，我们需要显示另一个模板：<ng-template>
我们使用带有angular *ngIf 指令的 <ng-template> 来显示 else 模板。
请参阅屏幕截图以查看新更改：
在这里，我们正在检查 selectdBike 变量是否有任何有效数据，如果有，该值将分配给 bike-details 组件的 ‘selected’ 属性。
我们需要在bike-details.component.ts 文件中有一个“selected”属性。我们很快就会这样做。
如果没有选择任何Bike，则将执行 ELSE 部分并调用名称为“no_bike_selected”的 ng-template。
您可以在此处阅读有关 ng-template 的更多信息>> https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/
在 bike-details.component.ts 中创建一个属性 ‘selected’
由于我们从组件外部分配数据，我们应该使用 @Input 装饰器。
然后我们需要更新bike-details.component.html 文件以显示在’selected’ 属性中分配的选定bike详细信息的内容。
在这里，我们使用字符串插值和属性绑定来显示所选自行车的详细信息。
成功！！
一切都完成了。保存更改并检查浏览器以查看最终输出。
我们将看到最终结果，如下图所示：
结论
最后，我们完成了第一组需求。
让我们回顾一下到目前为止我们完成的主要活动：
- 创建一个新的 Angular 项目
- 创建组件
- Bootstrap库的安装和使用
- 组件之间的通信
- 使用属性绑定、事件绑定和字符串插值
- ngIf 和 ngFor 的使用
从这 9 篇文章中，你将对 Angular 框架的基本结构和使用有一个基本的了解。
在下一篇文章中，我们将看到实现服务。
要阅读我的下一篇文章，请单击此处 >> #10 – 创建 Angular Service以访问自行车详细信息
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
