Angular 6 : Update a value in my component when she change in my service

我的目标原则上很简单，但是我不能将其放在适当的位置:我希望在更改服务变量时更新我的​​组件之一。

为了更好地解释我的问题，这里的是一个示例:

在这里，我有一项增加或减少点数的服务。
当它收到对其功能之一的调用时，它将减少或增加此点数。
它还说明此变量是偶数还是奇数

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  Number: number = 0;
  IsOdd: boolean = false;

  constructor() {}

  IncreaseNumber() {
    this.Number = this.Number + 1;
    this.IsOdd = !this.IsOdd;
  }

  DecreaseNumber() {
    this.Number = this.Number - 1;
    this.IsOdd = !this.IsOdd;
  }
}

*这里，我有我的部分，需要知道我的数字是偶数还是奇数。

在初始化时，没问题!它知道!

每次我的服务(test.service.ts)中的数字变化时，如何确保值对/导入值在我的组件(test.component.ts)中发生变化？*

import { Component, OnInit } from '@angular/core';
import { TestService } from '../test.service'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {

  IsOdd: boolean = false;

  constructor(MyService: TestService) {}

  ngOnInit() {
    this.IsOdd = MyService.IsOdd;
  }

}

我应该怎么做？

我的组件是否需要以某种方式subscribe到我的服务？
还是我必须使用ngOnInit这样的函数来进行更新？

提前致谢

最佳答案

如果这些服务变量是复杂类型(例如对象或数组)，因为它们是引用类型，它将自动更新。但是由于您具有类型和 bool 类型的Service变量，它们将不会自动更新，因为它们是原始类型，因此按值传递。

因此，您必须使用BehaviorSubject并将其公开给asObservable。您将通过在它们上调用BehaviorSubject方法来更新这些next的值。就是这样:

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

@Injectable({
  providedIn: 'root'
})
export class TestService {
  private myNumberValue = 0;
  private isOddValue = false;
  private myNumber: BehaviorSubject<number> = new BehaviorSubject<number>(this.myNumberValue);
  private isOdd: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  myNumber$: Observable<number> = this.myNumber.asObservable();
  isOdd$:  Observable<boolean> = this.isOdd.asObservable();

  constructor() {}

  increaseNumber() {
    this.myNumberValue = this.myNumberValue + 1;
    this.myNumber.next(this.myNumberValue);
    this.isOddValue = !this.isOddValue;
    this.isOdd.next(this.isOddValue);
  }

  decreaseNumber() {
    this.myNumberValue = this.myNumberValue - 1;
    this.myNumber.next(this.myNumberValue);
    this.isOddValue = !this.isOddValue;
    this.isOdd.next(this.isOddValue);
  }
}

现在，在您的组件中，您所需要做的就是将subscribe更改为服务中公开的public公开的Observable值:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TestService } from '../test.service'
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit, OnDestroy {

  isOdd: boolean;
  subscription: Subscription;

  constructor(private testService: TestService) {}

  ngOnInit() {
    this.subscription = this.testService.isOdd$.subscribe(isOdd => this.isOdd = isOdd);
  }

  ngOnDestroy() {
    this.subscription && this.subscription.unsubscribe();
  }

}

现在，由于已经在组件初始化期间调用了subscribe中的isOdd$到ngOnInit，因此每次服务中isOdd发生更改时，组件上的isOddValue都会更新。

另外，由于这是自定义的subscription，因此应将其分配给Component(subscription)中的属性，该属性的类型为Subscription，这是我们从subscribe方法获得的返回值。我们将不得不在unsubscribe中调用ngOnDestroy以避免内存泄漏。

PS:根据Angular's Styleguide，Angular类中的属性和方法名称应位于lowerCamelCase中。

关于Angular 6 : Update a value in my component when she change in my service，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53377973/