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

您可以使用BehaviorSubject()

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

  public toggle(): void {
    this.isOpen.next(!this.isOpen.getValue());
  }

  public getIsOpen(): Observable<boolean> {
    return this.isOpen.asObservable();
  }
}

Answer 2

isOpen是boolean。布尔值只是没有任何发布/订阅功能的原始值。

您想要的是实际上可以订阅的Observable。我们将在此处使用BehaviorSubject，因为您可以为其指定初始值。

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

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

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

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

然后使用this.connectService.isOpen$.subscribe(isOpen => ...)进行订阅。

Answer 3

of(this.isOpen)只会发出一个值一次。您需要的是类似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);
}

如何在Angular中订阅服务

3 个答案: