如何在组件级别检测模型更改？答案

【问题标题】：How to I detect model changes at a component level?如何在组件级别检测模型更改？
【发布时间】：2020-06-02 07:28:42
【问题描述】：

我需要能够在组件级别检测模型更改（不仅来自前端的输入，还包括后端/应用程序更改）。

当模型属性满足特定条件时，我想设置组件元素的焦点。

我正在使用 Angular 7。

我有以下型号：

export class Hello  {
  enabled: boolean;
  name: string;
  focus: boolean;
  selected: boolean;
  text: string;
}

以下组件引用了模型：

export class HelloComponent  {
  @Input() model: Hello;
}

假设现在我有一个在后端更新模型的过程，例如，“焦点”布尔值经常变化，我希望能够检测到组件中的变化并专注于一个元素。

【问题讨论】：

【解决方案1】：

最好使用 RxJS。只需在您的应用程序服务的事件组件中使用 subscription 并使用标准主题。

【讨论】：

【解决方案2】：

如果我猜对了

检测模型更改（不仅来自前端的输入，还包括后端/应用程序更改）

当您的模型发生更改时，您希望在组件中得到通知。

我建议使用Observables。您可以订阅 Observable（例如登录状态）。
您不必寻找更改，但会收到有关更改的通知。结合您的 UI，可以绑定更改，使 UI 自动更新。

可能是某事。喜欢：

loggedIn$: Observable<Boolean>;

public ngOnInit() {
    this.loggedIn$ = this.loginService.getLoginState()
}

说到 Observables，“状态管理”真的很有趣——例如RXJS 或 NGXS 涉及 Angular。看看some articles。

【讨论】：