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

Question

I am developing an CRUD operation. While updating, on updateUser component I get data of user through service variable. But when I refresh edit page the data of user is undefined. Please suggest me a better solution of this.

I do not want to call api of users on editpage.

    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

first of all, Angular is used to create SPA. So you do not refresh page, but in case your application requires it, it is obvious that on refresh data from service will get undefined because when you refresh you complete application gets reloaded.

So, in your case, if you still need the value after refresh and do not want to make an API call you can use browser local storage. With this you data will persist even after refresh but will be gone once the browser is closed.

Refer: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage for more detail and implementation of local store.