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（）方法时，navIcons应该更新，并且这些更新应该显示在Component1上。我在订阅日志中的console.log中发生了此更改，但是，Component1 HTML中的图标永远不会更新。我认为这些应该自动更新，因为图标在Service1的构造函数中得到更新。当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和组件1 HTML将保持不变。

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

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

服务1

navIcons = {
  icon1: false,
  icon2: false
}

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

如果您需要进一步的帮助，请添加评论。

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

1 个答案: