时间戳

首页 > 解决方案 > 在两个组件之间共享数据（角度）

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

问题描述

我有一个场景，用户单击一个按钮来调用 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，而是在setData服务下打印实际ID。我在想问题可能是我不能为 getData 放置 ngOnInit，因为 componentA 尚未调用，所以 getData 将是空白的。我想在单击显示按钮时调用 getData 。如果我将 getData 置于显示下，它仍然无法工作......

标签： angular

解决方案

添加此更改它将起作用：

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

希望能帮助到你。

推荐阅读