Angular 2未檢測到組件的服務變量中的更改

Question

下午好，

我正在嘗試更新組件，以便在更改時顯示服務變量的正確值。 我目前有這個：

Component1 HTML

{{icons | json}}

COMPONENT1

icons: {
  icon1: boolean,
  icon2: boolean,
}

constructor(private _service: Service1) {
  this.icons = this._service.navIcons;
}

COMPONENT2

constructor(private _service: Service1) {
  this._service.signIn();
}

服務1

navIcons: {
  icon1: false,
  icon2: false
}

navIconsChange: Subject<any> = new Subject<any>();

constructor() { 
  this.navIconsChange.subscribe((value) => { this.navIcons = value; console.log(value) });
}

resetIcons() {
  this.navIconsChange.next(
    this.navIcons = {
       icon1: false,
       icon2: false
    });
}

signIn() {
  this.navIconsChange.next(
    this.navIcons = {
       icon1: true,
       icon2: true
    });
}

這個想法是，當從Component2調用signIn（）方法時，導航圖標應更新，並且這些更新應顯示在Component1上。 我在訂閱日志中看到的console.log發生了此更改，但是Component1 HTML中的圖標從不更新。 我認為這些應該自動更新，因為圖標是從Service1在Component1的構造函數中更新的。 當Component2調用signIn（）方法時，如何獲取這些變量以進行更新？

這都是基於此答案的： https : //stackoverflow.com/a/43161506/4927000

謝謝！

Answer 1

當您以錯誤的方式處理許多事情時，您需要修改許多代碼。

組件1

icons: {
  icon1: boolean,
  icon2: boolean,
}

constructor(private _service: Service1) {
    this._service.navIconsChange.subscribe((value) => {
     this.navIcons = value; 
     console.log(value) 
    });
}

服務1

navIcons: {
  icon1: false,
  icon2: false
}

navIconsChange: Subject<any> = new Subject<any>();

resetIcons() {
  this.navIconsChange.next({
       icon1: false,
       icon2: false
    });
}

signIn() {
  this.navIconsChange.next({
       icon1: true,
       icon2: true
    });
}

組件2和Component1 HTML將保持不變。

這樣，您的comopnent 1就會知道何時值被更改。

另外，如果要將結果緩存在其他組件的服務中，則可以將其手動分配給.next之后的變量，或使用BehaviourSubject例如：

服務1

navIcons = {
  icon1: false,
  icon2: false
}

navIconsChange: Subject<any> = new BehaviourSubject<any>(navIcons);

如果您需要進一步的幫助，請添加評論。