Question

我以前使用action概念与React / Mobx合作。这允许在一个事务中更改某些模型属性而不触发多个事件来更新UI状态（在执行操作方法后将只触发一个事件）。

是否有任何方法或可能是在Angular 2中实现相同行为的模式？

Answer 1

我正在使用这样的服务来控制UI：

@Injectable()
export class UIService {
  private buffer: any = {};
  private dispatcher: Subject<any> = new Subject();

  constructor() {
    this.dispatcher
      .asObservable()
      .map(state => this.buffer = { ...this.buffer, ...state })
      .debounceTime(50)
      .subscribe(() => { /* do something */));
  }

  set(key: string, value?: any) {
    this.dispatcher.next({ [key]: value });
  }
}

在ngOnInit()的不同组件中我设置了不同的选项：

this.uiService.set('footer', false); // in base component
this.uiService.set('footer', true); // in extended component
this.uiService.set('sidebar', true); // in other component
this.uiService.set('title', 'My Page'); // elsewhere...

这样我只有一个对象可以反映我当前的UI状态......

Answer 2

请注意，MobX也可以与Angular 2一起使用：https://github.com/500tech/ng2-mobx

Angular 2中的事务模型更新

2 个答案: