在兩個組件之間共享數據（角度）

Question

我有一個場景，用戶單擊一個按鈕來調用Web服務並將數據傳遞給第二個組件。 我查看了一些示例，但沒有用，如果有人指出出了什么問題，將不勝感激。

componentA：

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

以componentB：

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，而是服務下的setData打印了實際ID。 我認為問題可能是我無法將ngOnInit放置在getData上，因為componentA尚未調用，因此getData將為空白。 我想在單擊顯示按鈕時調用getData。 如果我將getData放在顯示下，它將仍然無法使用...

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);
}

希望能幫助到你。