Question

我有styles属性的类，它通过双向数据绑定[(ngModel)]="styles"在模板中更新。

我如何基于此属性创建Observer，当我在输入中更改该属性时，每次都会向Observer订阅者提供新的更新值？

现在我做了两件事：

双向数据绑定[（ngModel）] =＆＃34;样式＆＃34;
输入keyUp处理程序，其中我将class styles属性放在Subject的next（）方法中。

有更好的方法吗？

// template
<input type="text" [(ngModel)]="styles.background" (keyup)="onInputChange($event)">


// component
private onInputChange (event): void {
    this.stylesService
        .getStyles()
        .next(this.styles);
}

Answer 1

让你的头脑缠绕着可观察的东西需要时间，但这是值得的:)如果我理解你的问题，你想要建立一个input字段，你可以手工输入它的值和它的价值被发送给正在收听StylesService的所有听众，这里是此类服务的代码：

import {Injectable} from "angular2/core";
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';

@Injectable()
export class StylesService{
  public styles$: Observable<any>;  // Anyone can subscribe to this variable
  private _data: any = {};
  private _observer: Observer<any>;

  constructor() {
    this.styles$ = Observable.create(observer => {
      this._observer = observer;
    }).share();
  };

  update(newValue) {
    this._data = newValue;
    this._observer.next(newValue);
  }
}

您可以在组件中订阅此服务，如下所示：

@Component({...})
export class AppComponent { 
  observedStyles: any = { background: 'red' };

  constructor(private stylesService: StylesService) {
    stylesService.styles$.subscribe((data) => {
      this.observedStyles = data;
    });
  }

  private onInputChange(event): void {
    this.stylesService.update({ background: event.target.value });
  }
}

我创建了一个plunker，您可以自己探索它：http://plnkr.co/edit/MlyYKjaFPlkJPAKCik7t?p=preview

观察者和更新的类属性

1 个答案: