问题描述
我有一个 Angular 应用程序,其中有一个具有 3 种类型变量的服务:简单布尔值、布尔类型的行为主题和具有类型数字属性的对象。
我正在使用服务的 getter-setter 方法更新子组件中的所有 3 个变量。现在我希望父组件中服务变量的那些更新更改不从子组件发出更改。它适用于对象和行为主题,但它没有反映简单布尔变量中的变化。
那么,这三个可能导致这种行为的区别是什么?
我创建了一个简单的 stackblitz 演示来演示上述内容。这是链接:Stackblitz
解决方法
更简单地分解问题:
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 有点奇怪,这里有一个关于 Stackoverflow 的更好解释:https://stackoverflow.com/a/6605700/177516
现在在您的示例中,布尔值不起作用的原因是因为您在 appComponent 中分配了它,因此克隆该值以及对原始值的任何更改都不会影响它。这不是 Angular 的问题,而是 javascript 的问题。
例如,如果您在视图中进行了更改以执行类似操作
{{service.isValue}}
然后这将实时更新,因为您指向的是原始参考,而不是您的克隆版本。
,您的问题是 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.
);
}