Angular 角度2未检测到来自组件的服务变量的变化

下午好

我正在尝试更新组件，以便在服务变量发生更改时显示其正确值。我目前有：

组件1 HTML

组件1

组件2

服务1

其思想是，当从Component2调用signIn方法时，navIcons应该更新，这些更新应该显示在Component1上。订阅日志中的console.log显示发生了此更改，但是Component1 HTML中的图标从未更新。我认为这些应该自动更新，因为图标是从Service1在Component1的构造函数中更新的。当Component2调用signIn方法时，如何更新这些变量

这都是基于这个答案：

---

谢谢大家!

您需要修改大部分代码，因为您正在以错误的方式执行许多操作

组成部分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
    });
}

navIcons = {
  icon1: false,
  icon2: false
}

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

---

如果需要进一步帮助，请添加注释。

这似乎是正确的，但是订阅似乎需要一段时间才能执行。此外，我还收到以下错误：ExpressionChangedTerithasBeenCheckedError:Expression在检查后已更改。上一个值：“ngIf:true”。当前值：“ngIf:false”。我之前直接从HTML调用服务时遇到这个错误，所以我想更改它。关于为什么会发生这种情况，有什么想法吗？我通过向订阅添加setTimeout函数来消除错误，如下面的回答所示：。一切都进展得很快，正如我所期望的那样，但我忍不住认为这是一种糟糕的执行方式。想法？没关系，我意识到我在ngOnInit中更改了这些值，而不是构造函数，所以听起来这些更改好像是在发生更改检测之前进行的。非常感谢你的帮助@乔希，我希望你一切顺利。但是不要在代码中使用setTimeout，因为您可以发布完整的错误或代码来帮助理解问题@acdcjunior我很惊讶地看到你如此优秀的学习态度和积极的反馈。我也会试着复制一下在没有使用setTimeout的情况下，一切都很好。我觉得这不是一个很好的选择再次感谢您的帮助，通过将代码移到构造函数而不是ngOnInit中，我能够修复ExpressionChangedTerithasBeenCheckedError。

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
    });
}

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

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

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
    });
}

navIcons = {
  icon1: false,
  icon2: false
}

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