Question

我的 shared-data.service.ts 包含一些私有属性，例如：

private _selectedId: string;

get selectedId(): string {
  return this._selectedId;
}

set selectedId(value: string) {
  this._selectedId = value;
}

我在组件 list.component.ts 中调用此服务作为公共对象，并直接在组件中使用它。

constructor(public sharedDataService: SharedDataService) {}
...
list: Defect[] = this.sharedDataService.getDefects(this.sharedDataService.selectedId)

此外，我直接在组件的.html文件中使用该服务，即 list.component.html ： <div>{{sharedDataService.selectedId}}</div>

当我现在通过另一个组件更新服务中_selectedId的值时，我遇到以下问题：

但 list.component.html ，<div>元素的内容将会更新。

为什么html部分会获得更新，但list: Defect[]不会获得更新？

Answer 1

组件中的指令只在构造组件时执行一次，并且只执行一次。因此，缺陷列表在构造时初始化，并且没有理由改变。要进行更改，组件必须知道所选ID已更改，并且必须再次调用getDefects（），并再次设置this.list的值。

另一方面，模板中的表达式sharedDataService.selectedId会在每次角度变化检测时重新评估。因此，每次触发某个事件时，Angular会重新评估此表达式，测试它是否具有与以前不同的值，并相应地更新DOM。

要刷新组件中的列表，设置所选ID应该从组件订阅的observable发出一个事件，以刷新列表。如下所述：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

您的视图会更新，因为组件的生命周期调用每次移动鼠标时获取id的方法（打印一个console.log里面的getId（）方法...你会看到）。并且列表分配只被调用一次（我假设是在ngOnInit（）中），你必须选择：