使用来自另一个组件的数据加载一个角度组件答案

【问题标题】：Loading an angular component using data from another component使用来自另一个组件的数据加载一个角度组件
【发布时间】：2021-03-27 15:00:05
【问题描述】：

基本上，我在 Ionic 中有一个网格，它使用ngFor 填充其行，并创建一个离子按钮，让用户可以“查看单个对象的详细信息”。可以将其想象为显示其字段“预览”的对象列表，但单击按钮应加载一个包含对象所有数据的新组件（我的所有对象都存储在数组bulls:

<ion-row [ngClass]="(i % 2 == 0) ? 'odd' : 'even'" style="border-radius: 20px; border-style: solid; border-color: grey; margin-top: 10px;" *ngFor="let bull of bulls; let i = index;" id="{{ 'bull' + i }}" >

//More ion columns
    
<ion-col><ion-button (click)="loadIndividualBull(i)" expand="block" color="primary" class="ion-text-wrap">View</ion-button></ion-col>

在这一行内有几列，其中包含一些对象的数据，最后带有“查看”按钮

当我单击“查看”按钮时，如何将特定对象的数据传递到我创建的模板中，该模板将显示该对象的所有数据？

编辑：我认为this post 是我想要做的事情

【问题讨论】：

你能展示你的loadIndividualBull函数吗？

标签： angular ionic-framework ionic4 angular8

【解决方案1】：

我假设显示特定对象数据的新组件不是不同的路线。如果在 ngFor 中提到了该组件，您可以简单地使用属性绑定。

<div *ngFor="let bull of bulls; let i = index;" >
    <detail-component [data]= "bull" ></detail-component>
</div>

数据属性可以通过 Input 装饰器在组件内部使用

只需在详细组件中添加@Input() 数据：。现在您可以在视图中为细节组件使用数据变量。

如果详细组件在其他路线上。然后，您可以使用共享服务来执行此操作。想法是创建一个具有变量的服务（例如 selectedBull），第一个视图（具有 ngFor）将数据设置为该变量，第二个路由（具有详细信息）从该路由获取数据。

【讨论】：