Question

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

Answer 1

您可以像使用*ngIf一样轻松完成此操作。只需在单击项目时调用函数并将其项目ID (click)="display(item.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的网址，在第二个组件中从路径获取Id，然后使用它来获取详细信息。

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

1 个答案: