Angular实战 – 不同组件传递数据

这次项目有一个需求是完全不相干的组件，但要显示相同的数据内容，使用 Angular8 开发，以此记录流程。

数据

数据长这样：

{
  "data": [
    {
      "name": "Tim",
      "age": "18",
      "gender": "male",
      "title": "Dad"
    },
    {
      "name": "Min",
      "age": "18",
      "gender": "Female",
      "title": "Mom"
    },
    {
      "name": "Joshua",
      "age": "2",
      "gender": "male",
      "title": "Son"
    },
    {
      "name": "Carol",
      "age": "0",
      "gender": "Female",
      "title": "Daughter"
    }
  ]
}

建立两个组件

建立两个不同的组件，没有父子层关系。

实际需求

在点击按钮时请求 API 取得数据后传到 second.component。

建立 service

在请求 API 前要先搭传数据的桥梁，在 Angular 中可以使用 service 来创建此方法。并分别在两个组件中引入 service 取得 dataService 服务组件。

使用 get 跟 set

通过 getter 跟 setter 的特性，将值取得后 set 到 _dataPass 数组中，要取得就使用 get。
dataService.servcie.ts

_dataPass = [];

get getData() {
  return this._dataPass;
}

set setData(val: any) {
  this._dataPass = val;
}

把数据给 dataService

设置完成后就可以来先在 first.component.ts 写下取得数据个过程。

1. 按下按钮触发事件，请求 API，并把数据赋值在 this.family 数组。
2. 使用 setter 的取得 this.family 的数据。
3. 跳转路由到 second 页面。

click() {
   this._apiService.data().subscribe((res) => {
     this.family = res;
     this._dataSvc.setData = this.family;
     this._router.navigate(['/second']);
   });
 }

从 dataService 取得数据

1. 引入 dataService 后，取得 first 组件传过来的数据，并赋值在 this.getFirstData 数组中。

getData() {
  this.getFirstData = this._datSvc.getData;
}

小结

善用 service 的注入配合 getter 与 setter，可以完成更多数据传递的实作，以上就完成两个不相干组件的数据传递。