Как передать данные по выбранной строке из одного компонента в другой, не передавая URL-адрес

Question

У меня есть матовый стол. щелкнув любой строкой, я могу вывести всю информацию из этой строки следующим образом:

{
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

Для хранения данных: в глобальной области видимости создайте переменную наподобие => data: string; и когда вы получите данные, введите: => this.data = api.data, данные будут храниться в компоненте. Чтобы использовать данные во всех компонентах, вы должны сохранить их в службе.