angular - 服务变量在子组件中更改时未在父组件中更新
问题描述
我有一个角度应用程序,其中有一个具有 3 种类型变量的服务:简单布尔值、布尔类型的行为主体和具有数字类型属性的对象。
我正在使用服务的 getter-setter 方法从子组件更新所有 3 个变量。现在我希望我的父组件中的服务变量的更新更改不会从子组件发出更改。它对 object 和 behaviorSubject 工作正常,但它没有反映简单布尔变量的变化。
那么,这三个之间有什么区别会导致这种行为呢?
我创建了一个简单的 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}}
然后这将实时更新,因为您指向的是原始参考,而不是您的克隆版本。
推荐阅读
- kubernetes-pod - YAML 文件中的 Kubernetes 命令和参数
- java - Swagger 忽略了生成代码的必填字段
- java - 为什么输入在打印之前仍然要求另一个输入?
- python - 使用给定单词列表中的单词形成给定单词
- spring-boot - Apache mina FTP服务器初始目录结构
- javascript - 正则表达式在两者之间解析 MIME 消息正文。如何?
- python-3.x - 有没有办法在调用 get 方法之前构造完整的 url?
- python - 寻求帮助以优化我在 python 中的自动键盘按压器
- sql - 合并来自不同表的列 BigQuery 返回数百万行
- flutter - 检测 draggableScrollableSheet 的位置滚动并覆盖其他小部件?