Question

我正在尝试使用可观察对象将字符串数组从一个组件传递到另一个组件。我能够在一个组件中创建可观察对象，并从另一个组件附加到它，但是我在如何更改可观察对象的值上画了一个完整的空白，以便第二个组件可以接受更改。我通过对话框创建字符串数组，并且工作正常。每次关闭对话框时，我都有新的字符串数组，但是我无法弄清楚如何更新可观察的数组，因此新值将传递给订户组件。这是我声明可观察的地方：

  public getIMEIs(): any {
     console.log('GetIMEIs');
     const IMEIsObservable = new Observable( observer => {
       console.log('returning devices: ', this.devicesToTrack);
       observer.next(this.devicesToTrack);
     });
     return IMEIsObservable;
   }

这是我在第二个组件中进行订阅的地方：

    const devicesToTrackObservable = this.devicesToTrackService.getIMEIs();
    devicesToTrackObservable.subscribe((devices: string[]) => {
      this.devicesToTrack = devices;
      console.log('devices to track: ', devices);
    })

这是对话框退出的处理位置：

      dialogRef.afterClosed().subscribe(result => {
        console.log('after dialog, returnData:', result);
        this.devicesToTrack = result[0];
        console.log('IMEIs to track:',this.devicesToTrack);
      });

当我有一个新的字符串数组要发送到第二个组件时，如何设置可观察对象的新值？我已经尝试创建一个set函数，但是我尝试的任何尝试都没有通过编译器，而是引用了可观察的对象。是简单的事情还是我需要重新思考做事的方式？

谢谢.....

Answer 1

示例代码将可观察对象隔离到服务中，并使用它在两个组件之间进行通信：

 DevicesToTrackService {
     IMEIsObservable$ = new Subject<any>();

     getIMEIs() {
         return this.IMEIsObservable$.asObservable();
     }

     publishIMEIs(data: any) {
         this.IMEIsObservable$.next(data);
     }
 }

 componentOne {
    ...

    const devicesToTrackObservable = this.devicesToTrackService.getIMEIs();
    devicesToTrackObservable.subscribe((devices: string[]) => {
      this.devicesToTrack = devices;
      console.log('devices to track: ', devices);
    })
 }

 componentTwo {
     ...

     dialogRef.afterClosed().subscribe(result => {
        console.log('after dialog, returnData:', result);
        this.devicesToTrack = result[0];
        this.devicesToTrackService.publishIMEIs(this.devicesToTrack)
        console.log('IMEIs to track:',this.devicesToTrack);
      });
 }

缺少可观察的基本知识

1 个答案: