通过服务将 observable 从一个组件传递到另一个组件答案

【问题标题】：Pass observable from one component to another via service通过服务将 observable 从一个组件传递到另一个组件
【发布时间】：2021-02-02 17:05:55
【问题描述】：

似乎有一些类似的问题和答案。但是，似乎没有人回答我的问题。我有一个垫子表，在它的每一行中，通过从垫子单元内的下拉列表中选择一个选项来触发更改。因此我可以 console.log 记录这个特定行的数据的变化。

html:

<mat-row *matRowDef="let row; columns: columnsToDisplay;" 
    (click)="selectDataRow(row);"</mat-row>

service.ts：

private subsSource = new BehaviorSubject<ISubs>(null);
subs$ = this.subsSource.asObservable();

component.ts：

constructor(private subsService: SubsService) { }

selectDataRow(row) {
    console.log(row);
    //to store this row data to the subs$ defined in the service
    this.subsService.subs$ = row;  
}

正如预期的那样，行数据确实记录到了控制台。

现在，我想在另一个组件 - ReviewComponent 中使用可观察变量“subs$”

export class ReviewComponent implements OnInit {

  constructor(private subsService: SubsService) { }

  ngOnInit(): void {  
    this.getSubs();  
  }

  getSubs() {
    this.subsService.subs$.subscribe(res => {
      console.log(res);
    });
}

不幸的是，我得到了从第二个组件观察到的 subs$ 的空日志。

谁能帮忙指出我做错了什么以及如何让它发挥作用？

【问题讨论】：

这看起来很奇怪：this.subsService.subs$ = row.. 我在任何地方都看不到 .next()。我怀疑你需要这样的东西。 subsSource.next(row) - 你必须公开它..
感谢穆拉特的解决方案。问题仍然存在。
感谢穆拉特的解决方案。问题依然存在。你能再看看吗？ 1）我在service.ts中修改了一下： public subs$ = this.subsSource.asObservable(); 2）然后尝试在IF条件之前在ReviewComponent中执行console.log res，得到“未定义”，否则，什么也没有发生3）我不清楚ReviewComponent中的ngOnDestroy（）方法，你能澄清一下吗？如果确实需要此方法，则其中的“subs”是否应该是 this.subscriptions。
@canbrian 1）您还可以使用答案中的 set / get 方法。 2）它只是检查值 onLoad 以区分。但是在设置了 observable 之后，值不应该是未定义的。 3) 在ngOnDestroy() 中，销毁订阅以防止内存泄漏。如果你使用BehaviourSubjectAngular Best Practice: Unsubscribing (RxJS Observables)，我建议你看看这个问题。

标签： angular service components observable

【解决方案1】：

试试这个：

private subsSource = new BehaviorSubject<ISubs>(undefined);

getSubsSource(): BehaviorSubject<ISubs> {
    return this.subsSource;
}

setSubsSource(param: any) {
    this.subsSource.next(param);
}

component.ts：

constructor(private subsService: SubsService) { }

selectDataRow(row) {
    console.log(row);
    //to store this row data to the subs$ defined in the service
    this.subsService.setSubsSource(row);
}

export class ReviewComponent implements OnInit {

    private subscriptions = new Subscription();

    constructor(private subsService: SubsService) { }

    ngOnInit(): void {  
        this.getSubs();  
    }

    getSubs() {
        this.subscriptions.add(this.subsService.subs$.subscribe(res => {
            if (res !== undefined) {
                console.log(res);
            }
        });
    }

    ngOnDestroy() {
      subs.forEach(sub => sub.unsubscribe());
    }
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

您需要使用您的主题，而不是初始化您的 observable：

component.ts：

selectDataRow(row) {
    this.subsService.setSubsSource(row);
}

service.ts：

setSubsSource(row){
    this.subsSource.next(row);
}

其他的，就像你写的一样

【讨论】：

现在，为空。你会给我什么其他的建议让我试一试？谢谢！