为什么我的输入绑定属性在我的 angular child 组件中没有改变？

Question

我有一个 parent 组件有两个 children.

parent 组件有一个属性，它实际上是一个像这样的字典：

dict = {a: 0, b: 0, c: 0};

我进行输入绑定，以便 child 两个组件都可以访问 dict。

<app-child-a [dict]="dict"></app-child-a>
<app-child-b [dict]="dict"></app-child-b>

ChildA变属性 of dict

@Input() dict: any;

someFunctionInChildA() {
  this.dict.b = 1;
}

我可以验证 Parent 组件知道此更改。

ngAfterInit() {
  setInterval(() => console.log(this.dict), 1000);
}

这会打印 0 秒，直到 someFunctionInChildA 被触发，然后它会打印 1 秒。

这是我的问题：child B 似乎没有看到变化。这是来自 child B

的一些代码

@Input() dict: any;

ngAfterInit() {
  setInterval(() => console.log(this.dict), 1000);
}

这会一直打印 0s，即使在触发 someFunctionInChildA 之后也是如此。

我不明白属性绑定是如何工作的吗？或者更有可能是我在其他地方遇到了愚蠢或不相关的错误？

Answer 1

如您所见：https://stackblitz.com/edit/angular-7-master-nxys2f?file=src/app/hello.component.ts

有问题的代码工作正常。但是.. 这是一个非常糟糕的做法。因为这种远距离突变会导致难以推理代码和难以理解的错误。我猜您的实际应用程序有点复杂，您可能不小心在某处破坏了引用。这就是为什么你应该使用共享服务模型和 rxjs 在组件之间共享信息：

@Injectable()
export class DictService {
  private dictSource = new BehaviorSubject({a: 0, b: 0, c: 0})
  dict$ = this.dictSource.asObservable()
  setDict(dict) {
    this.dictSource.next(dict)
  }
}

然后注入你的组件并订阅：

constructor(private dictService: DictService) {
  this.dictSub = this.dictService.dict$.subscribe(dict => this.dict = dict) // don't forget to unsubscribe!
}

并使用服务更新：

someFunctionInChildA() {
  this.dict.b = 1;
  this.dictService.setDict(this.dict)
}

Answer 2

我已经解决了这个问题，我怀疑其他人会发现它有用，因为这是一件很少见的事情...

几天前，我实际上做了一个服务，可以将 dict 保存并更新到 Firebase 中，这将通过 rxjs 与我的组件同步。但我留下了一些旧逻辑（即 dict 由组件而不是服务管理的逻辑）。

我会将其标记为正确答案，但真正的功劳归功于@bryan06，他对此类应用程序的正确模式进行了很好的解释。

为什么我的输入绑定属性在我的 angular child 组件中没有改变？

Why isn't my input bound property changing in my angular child component?

angular

typescript

property-binding

为什么我的输入绑定 属性 在我的 angular child 组件中没有改变？

Why isn't my input bound property changing in my angular child component?

angular

typescript

property-binding

为什么我的输入绑定属性在我的 angular child 组件中没有改变？