如何在不传递到 url 的情况下将单击行的数据从一个组件传递到另一个组件答案

【问题标题】：How can i pass data of clicked row from one component to another component without passing to the url如何在不传递到 url 的情况下将单击行的数据从一个组件传递到另一个组件
【发布时间】：2020-04-08 05:32:19
【问题描述】：

我有一张垫子桌。 onclick 任何一行，我都可以像这样控制该行的所有信息：

{
sid: "105", 
vid: "2", 
serviceName: "Chicken Tikka",
serviceDescription: "Non Veg Dish", 
createdOn: "2019-05-21 13:08:43.124354"
}

我想传递给我的另一个组件，我想将它存储在一个变量中。

下面是我的代码：

services.component.html

 <tr mat-header-row *matHeaderRowDef="['sid','vid','serviceName','createdOn']"></tr>
            <tr class="rowhover" (click)="displayData(row,row.sid)" mat-row *matRowDef="let row; columns: ['sid','vid','serviceName','createdOn']"></tr>
            </table>

services.component.ts

displayData(row,sid)
  {
    console.log(row);    
   this.router.navigate(["/vendor-list/vendor/a/services/a/details/",sid]);
  }

【问题讨论】：

标签： angular

【解决方案1】：

经过研究，我得到了答案：

1) 首先我们必须在服务中创建像“dataRow”这样的变量。 2) 在我们的父组件中

displayData(row,sid:any)
  {
   // console.log(row);    
    this.apiService.dataRow=row;
   this.router.navigate(["/vendor-list/vendor/a/services/a/details/",sid]);
  }

3) 在子组件中

dataRow1:any;
  ngOnInit() {
    this.dataRow1=this.apiService.dataRow;
    console.log(this.dataRow1.serviceName);
  }

【讨论】：

【解决方案2】：

有一些方法可以解决您的问题，我认为使用服务是解决问题的好方法。请看这里https://angular.io/tutorial/toh-pt4

存储数据：在全局范围内创建一个变量，如 => data: string; 当你获取数据然后输入 => this.data = api.data，数据将存储在组件中要在所有组件中使用数据，您需要将其保存在服务中。

【讨论】：