Angular 2 未检测到组件中服务变量的变化

Question

下午好，

我正在尝试更新我的组件以在服务变量更改时显示正确的值。我目前有这个：

组件1 HTML

{{icons | json}}

组件1

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

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

组件2

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() 方法时，navIcons 应该更新并且这些更新应该显示在 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
    });
}

Component 2 和 Component1 HTML 将保持不变。

这样您的comopnent 1 就会知道值何时发生变化。

此外，如果您想将结果缓存在其他组件的服务中，您可以在.next 之后手动将其分配给变量或使用BehaviourSubject，例如：

服务 1

navIcons = {
  icon1: false,
  icon2: false
}

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

如果您需要进一步帮助，请添加 cmets。