服务变量在子组件中更改时未在父组件中更新

Question

我有一个 angular 应用程序，其中有一个具有 3 种变量类型的服务：简单布尔值、布尔值类型的 behaviorSubject 和属性类型数字的对象。

我正在使用服务的 getter-setter 方法从子组件更新所有 3 个变量。现在，我希望父组件中服务变量的更新更改不会从子组件发出更改。它对对象和 behaviorSubject 工作正常，但它没有反映简单布尔变量中的变化。

那么，这 3 个之间有什么区别会导致这种行为？

我创建了一个简单的 stackblitz 演示来演示上述内容。这是 link：Stackblitz

Answer 1

您的问题是 ngOnInit 订阅格式错误。看起来你的意图是改变这三个值。

更改您现有的：

 ngOnInit() {
  this.service.isObservableValue
  // .pipe(take(1))
  .subscribe(bool => (this.isObservaleValue = bool)); // <-- only this gets called on subscribed event

 this.isValue = this.service.isValue; // <--- these two lines only get called once
 this.data = this.service.response.data; // <--- this too
}

为此：

 ngOnInit() {
  this.service.isObservableValue
  // .pipe(take(1))
  .subscribe(bool => { // <-- add a bracket here
    this.isObservaleValue = bool;
    this.isValue = this.service.isValue;
    this.data = this.service.response.data;
  } // <-- and another one here.
  );
 }

Answer 2

更简单地分解问题：

let myBoolean = false;
let newBoolean = myBoolean;
newBoolean = true;
console.log(newBoolean); //true
console.log(myBoolean); //false

鉴于

let myBoolean = { data : false };
let newBoolean = myBoolean;
newBoolean.data = true;
console.log(newBoolean); //true
console.log(myBoolean); //true

分配原始值时，您是按值分配。更改此值不会影响原始值。当您对对象执行相同操作时，您仍然按值传递（指向原始对象的指针），但是更改该对象上的属性也会更改原始对象。 Javascript 有点奇怪，这里有一个关于 Whosebug 的更好的解释：

现在在您的示例中，布尔值不起作用的原因是因为您在 appComponent 中分配它，因此克隆值和对原始值的任何更改都不会影响它。这不是 Angular 问题，而是 javascript 问题。

例如，如果您在视图中进行了更改以执行类似

的操作

{{service.isValue}}

然后这会实时更新，因为您指向的是原始参考，而不是您的克隆版本。

服务变量在子组件中更改时未在父组件中更新

Service variable not updating in parent component while changing it in child component

rxjs

angular-services

angular