时间戳

首页 > 解决方案 > 处理组件和服务类中的布尔字段 - Angular 2

angular - 处理组件和服务类中的布尔字段 - Angular 2

问题描述

你好我基本上是Angular的新手，在这里我试图从服务中访问一个布尔变量。我已经在服务中声明了一个值为 true 的布尔变量。基于一些逻辑，我将把该服务变量更改为 false。我在几个组件中使用的那个特定变量。所以我面临这样的问题，我分配的初始值是真实的，它会出现在我使用过的所有组件中，但是在更改了未反映在所有组件中的值之后。像这样的服务类：

@Injectable()
export class MyService { 
running: boolean = true;
}

组件 1：

export class FirstComponent {
  constructor(private myService: MyService) { }
  check(){
  this.myservice.running = false;
  }
}

组件 2：

export class SecondComponent implements OnChanges {
      running;
      constructor(private myService: MyService) { }
      ngOnChanges(){
      this.running = this.myService.running;
      console.log('running', this.running);
      }
    }

这就是我将如何更改布尔值并从不同组件中的服务访问。我不确定这是否是正确的方法，请纠正我。

标签： angular

解决方案

一个简单的答案怎么样：

1) 如果您使用的是 Angular v6 或更新版本，那么只需将您的服务更改为以下内容：

@Injectable(providedIn: 'root')
export class MyService { 
   running: boolean = true;
}

2) 搜索您的系统并确保该MyService服务未列在providers任何模块或组件的数组中。

3）更改您的组件以使用吸气剂。正如其他人所说，ngOnChanges唯一适用于@Input属性。

  export class SecondComponent {
      running;
      constructor(private myService: MyService) { }

      get running(): boolean {
        return this.myService.running;
      }
    }

应该这样做！

当服务中的值发生变化时，Angular 的内置变化检测将拾取变化并重新获取值，调用 getter 并将更新后的值提供给模板。

您不需要像这样简单Subject的BehaviorSubject事情。（那些是过度使用恕我直言。）

我在这里有一个非常简单（和类似）的示例：https ://stackblitz.com/edit/angular-simpleservice-deborahk

它使用字符串，但对于布尔值的工作方式完全相同。

推荐阅读