如何将单击行的数据从一个组件传递到另一个组件而不传递到 url

Question

我有一张垫子桌。 任何行的 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]);
  }

Answer 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);
  }

Answer 2

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

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