在 Angular 2 中观察对象属性的变化

Question

我最近从 Angular 1 迁移到 Angular 2，并且在尝试检测对象属性的变化时经常遇到问题（以前通过 $watch 完成的事情）。

典型的用例是我将有一个可注入的服务来维护一段数据，例如一个包含设置的对象：

@Injectable()
export class SettingsService
{
    _settings = {
        'settingA' : true,
        'settingB' : false
    }

   ...

   get settings()
   {
       return this._settings;
   }
}

然后，我将在 Ionic 应用程序中拥有一个组件，例如设置页面，该组件将从设置服务获取设置：

constructor(private settingsService : SettingsService)
{
    this.settings = settingsService.settings;
}

并直接将对象属性耦合到 UI 组件，例如 toggle。问题不是在每个切换更改事件上调用一个函数，服务或组件如何知道设置对象已更改以触发适当的操作，例如将设置保存到数据存储？

Answer 1

要构建一个可观察的数据服务，您可以使用来自rxjs 的BehaviorSubject。您在您的服务中创建一个主题，然后您必须在您的组件中订阅该主题。

在此处查看有关使用它创建服务的一些教程：example 1、example 2。

理论上，您有机会在您的服务中使用EventEmitter。但你不应该使用它。看看这个answer 了解更多详情。在这个答案中，您还可以找到一个如何使用 Observable 而不是 BehaviorSubject 来解决它的示例