如何在 Angular 中订阅服务

Question

我有 3 个对象： - 第一个组件 - 连接服务 - 第二个组件

第一个组件在折叠/展开时应通过服务展开/折叠第二个组件。

在服务中，我有函数toggle()，它应该只更改布尔isOpen的布尔变量。在它旁边我还有其他函数 getIsOpen() ，其返回类型为 Observable。代码如下所示：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { of } from 'rxjs/internal/observable/of';

@Injectable()
export class ConnectService {
  public isOpen = false;

  public toggle(): void {
    this.isOpen = !this.isOpen;
    console.log('Im inside toggle');
  }

  public getIsOpen(): Observable<boolean>{
    console.log('Im inside getIsOpen');
    return of(this.isOpen);
  }
}

在第二个组件中，我尝试订阅：

public ngOnInit(): void {
  this.connectionService.getIsOpen().subscribe(x => this.isFirstComponentExpanded = x);
}

但唯一的效果只是在页面加载后，单击后，第二个组件没有折叠或展开。如何在没有事件发射器的情况下监听服务内部的每个更改（我需要避免那里的任何事件发射器，只有可观察值、订阅和主题）。

Answer 1

of(this.isOpen)只会发出一个值一次。您需要的是类似 a 的东西BehaviorSubject，它总是发出其最新值。

@Injectable()
export class ConnectService {

  public isOpen = new BehaviorSubject<boolean>(false);

  public toggle(): void {
    this.isOpen.next(!this.isOpen.value);
    console.log('Im inside toggle');
  }

}

然后，在您的组件中，您可以直接订阅您的主题，无需创建额外的 Observable：

public ngOnInit(): void {
  this.connectionService.isOpen.subscribe(x => this.isFirstComponentExpanded = x);
}