从组件一调用组件二并从组件一传递数据

call component two from component one and pass data from component one

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

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

组件

displayItemId: number = 0;

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

HTML

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

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

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

组件

displayItem: any;

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

HTML

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

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