时间戳

首页 > 解决方案 > Search Popup 组件如何以角度与其他两个组件通信

angular - Search Popup 组件如何以角度与其他两个组件通信

问题描述

搜索项目-我想在 Angular 中创建一个新的搜索项目。

要求是当我单击另一个站点中的搜索按钮时，它将导航到我们项目中的 searchcircular 页面，并直接从 searchcircular 页面显示搜索弹出窗口。当我单击搜索按钮时，它将在弹出窗口中的该搜索按钮下方显示搜索结果。当我从搜索结果中选择一行时，我需要隐藏此搜索弹出窗口并将该行的详细信息显示到另一个页面“SearchDetails”。当我们单击 SearchDetails 页面中的搜索按钮时，我必须再次显示与之前显示的相同的弹出窗口。

首先，我在 appcomponent 中添加了页眉和页脚。然后我创建了一个搜索弹出组件，并将其包含在初始搜索循环页面中。

然后我创建了一个 SearchDetails 组件来显示详细信息。并在这里也包括搜索组件。

我的疑问是搜索弹出组件如何与 searchcircular 和 SearchDetails 组件通信。

标签： angularsearchpopup

解决方案

如果您使用 mat-dialog 弹出窗口，那么您必须使用类似这样的弹出窗口：

constructor(public dialog: MatDialog){ }

const dialogRef = this.dialog.open(popUpComponent, {
  width: '40%'
});

添加这个：

dialogRef.afterClosed().subscribe(result => {
 // here you can get data from other component
});

在其他两个组件中，您将使用 dialogRef.close()。现在，在 close() 中发送一些数据进行通信：

constructor(public dialogRef: MatDialogRef<searchCircularcomponent>){}

this.dialogRef.close('send your data here')

推荐阅读