在 angular 8 中，我们如何将数据从一个组件发送到另一个同级组件？

Question

我正在开发一个 CRUD 操作。 更新时，在 updateUser 组件上，我通过服务变量获取用户数据。 但是当我刷新编辑页面时，用户的数据是未定义的。 请建议我一个更好的解决方案。

我不想在编辑页面上调用用户的 api。

    this.route.params.subscribe(params => {
      if (Object.keys(params).length > 0) {
        this.editId = (Object.values(params))[0];
      }
    })
    if(this.traineeData) {
      this.traineeData = this.traineeService.traineeData;  // here I am getting data, but on refreshing it becomes undefined
    } else {
      this.traineeData = this.traineeService.traineeData;
    }
    console.log(this.traineeData)
  }


export class UserService {

  traineeData: any;

  constructor(private http: HttpClient) { }

  getTrainee() {
    return new Promise((resolve,reject) => {
      this.http.get('url').subscribe(
      res => resolve(res),
      err => reject(err));
    })
  }

  provideTraineeDataForEdit(data) {
    this.traineeData = data
    console.log(this.traineeData)
  }
}```

Answer 1

首先，Angular用于创建SPA。 因此，您不刷新页面，但如果您的应用程序需要它，很明显，刷新服务中的数据将变得未定义，因为当您刷新时，您的完整应用程序会重新加载。

因此，在您的情况下，如果您仍然需要刷新后的值并且不想进行 API 调用，您可以使用浏览器本地存储。 有了这个，你的数据即使在刷新后也会保留，但一旦浏览器关闭就会消失。

参考： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage了解本地存储的更多细节和实现。