Angular 中的布尔值服务未按预期工作

Question

基本上，我的服务中有一个布尔值 canSiteReload，它基于同一服务中的另一个布尔值 hasChanges。

服务如下所示：

@Injectable({
  providedIn: 'root'
})
export class ApplicationService {

  constructor() { }

  public hasChanges: boolean = false;
  public canSiteReload: boolean = this.hasChanges === false;
}

问题是，当我将 hasChanges 更改为 true 时，canSiteReload 仍将 return 为 true，即使 this.hasChanges === false 应该 return false 因为 hasChanges 现在为真。

为什么会这样，我如何根据 hasChanges 计算 canSiteReload 的值？如果可能的话，我想避免额外的代码，例如没有 functions/setters.

复制者：https://stackblitz.com/edit/angular-rwcza8

Answer 1

同意@David 的评论。没有写函数，canSiteReload好像没有更新。

我分叉并更改了以下部分：

this.appService.hasChanges = false;

我在服务中创建了一个函数，并使用该函数更新了值。像这样：

public change(): void{
  this.appService.saveChanges(true);
  console.log('Has changes?: ', this.appService.hasChanges);
  console.log('Can site reload?: ', this.appService.canSiteReload);
}

public undo(): void{
  this.appService.saveChanges(false);
  console.log('Has changes?: ', this.appService.hasChanges);
  console.log('Can site reload?: ', this.appService.canSiteReload);
}

我认为它正在工作。

分叉：https://stackblitz.com/edit/angular-aeyxgg

Answer 2

canSiteReload 变量在 ApplicationService 的开头定义一次，并且永远不会再次更新。有多种方法可以满足您的要求。这是使用 Rxjs BehaviorSubject.

的一种方法

应用服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApplicationService {
  private hasChangesSource = new BehaviorSubject<boolean>(false);
  private hasChanges$ = this.hasChangesSource.asObservable();

  public canSiteReload: boolean;

  constructor() {
    this.hasChanges$.subscribe(status => this.canSiteReload = !status);
  }

  get hasChanges() {
    return this.hasChangesSource.value;
  }

  set hasChanges(status: boolean) {
    this.hasChangesSource.next(status);
  }
}

我修改了你的Stackblitz。

Answer 3

正如 David 所说，canSiteReload 已初始化但其值从未更新。

canSiteReload 不更新，即使 hasChanges 的值已更新为 true。

要修复，我们需要为 canSiteReload 添加一个 getter:

@Injectable({
  providedIn: 'root'
})
export class ApplicationService {

  constructor() { }

  public hasChanges: boolean = false;
  public get canSiteReload(): boolean{
    return !this.hasChanges
  }
}

canSiteReload 现在每次调用时都会计算。

可以在!this.hasChanges后添加附加条件。

https://stackblitz.com/edit/angular-z3uyqw

Angular 中的布尔值服务未按预期工作

Boolean in Angular Service is not working as expected

typescript

angular-services

angular