typescript - 订阅 Angular 2 中组件属性的更改以进行去抖自动保存？

Question

假设我有以下 Angular 2 组件，其中 foo 是一个未绑定(bind)到表单的对象，并且不是来自 Input():

@Component({
    selector: 'foo',
    templateUrl: '/angular/views/foo.template.html',
    directives: [ContentEditableDirective, ROUTER_DIRECTIVES],
    providers: [FooService]
})
export class FooComponent implements OnInit {
    public foo: Foo = new Foo();

    constructor(
        private fooService: FooService,
        private route : ActivatedRoute,
        private router : Router) {}

    ngOnInit() {
        let id = +this.route.snapshot.params['id'];
        this.fooService.getFoo(id).subscribe(
            foo => {
                this.foo = foo;

                // I have this.foo, we should watch for changes here.

                Observable. // ???
                    .debounceTime(1000)
                    .subscribe(input => fooService.autoSave(this.foo));
            },
            error => console.log(error)
        );
    }
}

如何订阅对 Foo 对象的更改，并将其发送到我的服务器？

到目前为止，我看到的每个示例都涉及从 Input() 中获取 foo，或者绑定(bind)到表单。我只想观察一个普通的旧 Javascript 对象的变化并对此使用react。

更新

我又试了一次，并且能够对组件上的内部 primitive 属性进行去抖动 here .

但是，我一直无法使用具有自身属性 ( here ) 的复杂对象来完成这项工作；因为提供的 plnkr 中的 setter 在更新 foo 对象的属性时不会被 ngModel 调用。

一个正确的答案将展示这个如何处理一个复杂的对象。

更新2

I believe I have it working with a complex object ;但是必须确保对象是不可变的，并且每个属性都有 setter ，这有点令人失望。它还似乎需要将 [(ngModel)] 拆分为 [ngModel] 和 (ngModelChange) 以便您可以指定自定义 setter 逻辑。

理论上您可以将功能抽象为状态服务，但我想看看是否可以进一步减少样板文件的数量。每次您想要更改状态时都创建新对象有点令人沮丧。

Answer 1

对于简单和复杂的对象，我似乎已经部分解决了这个问题。如果不需要整个变化检测器，您可以轻松地实现它:

• 您组件上的主题和可观察对象。
• 组件上跟踪属性的 getter 和 setter。

下面是一个非常简单的示例，说明如何完成此操作。

组件

import {Component} from '@angular/core'
import {Subject} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <input type="text" [(ngModel)]="foo"  />
      <div>current Foo: {{ foo }}</div>
      <div>debounced Foo: {{ debouncedFoo }}</div>
    </div>
  `,
  directives: []
})
export class App {
  private _foo: any;
  debouncedFoo: any;
  fooSubject : Subject<any> = new Subject<any>(this._foo);
  fooStream : Observable<any> = this.fooSubject.asObservable();

  get foo() {
      return this._foo;
  });

  set foo(value:any) {
    this._foo = value;
    this.fooSubject.next(value);
  });

  constructor() {
    // Manipulate your subscription stream here
    this.subscription = this.fooStream
      .debounceTime(2000)
      .subscribe(
        value => {
          this.debouncedFoo = value;
      });
  }
}

例子

http://plnkr.co/edit/HMJz6UWeZIBovMkXlR01?p=preview

当然，实际上组件应该不知道主题或可观察对象，因此请随意将它们提取到服务中。

缺点

这个例子只适用于原语。如果您希望它与对象一起使用，则需要为每个属性自定义 setter 逻辑，并记住在每次更改该对象的属性时创建新对象。