在两个组件之间共享数据（角度）

Question

我有一个场景，用户单击一个按钮来调用 Web 服务并将数据传递给第二个组件。 我查看了一些示例，但它不起作用，如果有人指出出了什么问题，将不胜感激。

组件A：

callService(id: any) {
    this.xService.getInfo(id).subscribe({
    data => this.myData = data;
    this.xService.setData(data);
    });
}

组件B：

ngOnInit() {
 this.xService.getData().subscribe(data => {this.myData = data; });
}

display() {
 console.log('test -- ' + myData.id);
}

服务：

Injectable()
export class XService {

  myData: BehaviorSubject<MyData> = new BehaviorSubject<MyData>(undefined);
  constructor(private httpclient: HttpClient) {}

  getInfo(id: string) {
        const param = new HttpParams()
        .set('id', Id);
        return this.httpclient.get<MyData>('/getxService', {params: param}).map(data => data);
  }

  getData(): Observable<MyData> {
        return this.myData.asObservable(); // <-- undefined from compB
  }

  setData(myData: MyData) {
      console.log('myData: ' + myData.id); // <-- this prints data (from compA)
      this.myData.next(myData);
  }
}

display() 不是在打印 id，而是在 service 下的 setData 打印了实际的 id。 我在想问题可能是我不能为 getData 放置 ngOnInit，因为 componentA 尚未调用，所以 getData 将是空白的。我想在单击显示按钮时调用 getData 。如果我将 getData 放在 display 下，它仍然无法工作......

Answer 1

添加此更改将起作用：

Injectable()
export class XService {
    private data: any = {};
    myData$: BehaviorSubject<MyData> = new BehaviorSubject<MyData>(undefined);
    constructor(private httpclient: HttpClient) {}

    getInfo(id: string) {
       const param = new HttpParams().set('id', Id);
       return this.httpclient.get<MyData>('/getxService', {params: param}).map(data => data);     
    }

    getData(): any {
       return this.data;
    }

   setData(myData: MyData) {
     this.data = myData;
     this.myData$.next(myData);
   }
}

在你的 B 组件中：

ngOnInit() {
    this.xService.myData$.subscribe(data => {this.myData = data; });
    this.myData = this.xService.getData();
}

display() {
 console.log('test -- ' + myData.id);
}

希望对你有帮助。