时间戳

首页 > 解决方案 > 为什么我的输入绑定属性在我的 Angular 子组件中没有改变？

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

问题描述

我有一个有两个孩子的父组件。

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

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

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

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

孩子 A 改变了dict

@Input() dict: any;

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

我可以验证父组件是否知道此更改。

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

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

这是我的问题：孩子 B 似乎没有看到变化。这是孩子B的一些代码

@Input() dict: any;

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

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

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

标签： angulartypescriptproperty-binding

解决方案

正如你在这里看到的：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)
}

推荐阅读