从组件 1 调用组件 2，并从组件 1 传递数据

Question

我有两个组件组件1(显示项目列表(，组件2(显示项目详细信息(，组件2默认隐藏。 我想要：当用户单击组件 2 中的列表项时，组件 2 应显示所选项的详细信息。为此，我创建了一个共享服务，该服务共享数据并且工作正常我的问题是：1：如何使组件 2 知道组件 1 上的单击事件，以便在用户单击列表视图上的项目后加载单击项目的详细信息。2：组件 2 使用 *ngIf="isComponent2Visible" 隐藏，用户单击组件 1(列表视图(中的项目后如何显示它。我希望这个问题易于理解且结构良好。

Answer 1

您可以像以前一样使用 *ngIf 轻松完成此操作。只需在单击项时调用一个函数，并像(click)="display(item.id)"将此 Id 设置为组件属性一样传递其项 Id，以便您可以在模板中访问它。

元件

displayItemId: number = 0;
display(id:number){
   this.displayItemId = id;
}

.HTML

<display-component *ngIf="displayItemId>0" [displayItemId]="displayItemId"></display-component>

在您的显示组件中，使用此@Input() displayItemId在ngOnInit()函数中获取特定详细信息。

或者 如果要在第一个组件中使用当前项目或已获取的详细信息，请将整个项目作为输入传递，并在第二个组件的模板上使用它。

元件

displayItem: any;
display(item:any){
   this.displayItem = item;
}

.HTML

<display-component *ngIf="displayItem" [displayItem]="displayItem">

其他(推荐(方法是使用路由器。只需导航到包含 Id items/details/5 的 URL，即可从第二个组件中的路由获取 Id，并使用它来获取详细信息。