Обновление транзакции модели в Angular 2

Question

Я ранее работал с React/Mobx с концепцией action. Это позволяет изменить некоторые свойства модели в одной транзакции, не активируя несколько событий для обновления состояния пользовательского интерфейса (только одно событие будет запущено после того, как будет выполнен метод действия).

Есть ли какой-либо подход или может быть шаблоном для достижения такого же поведения в Angular 2?

Answer 1

Обратите внимание, что MobX может использоваться также с угловым 2: https://github.com/500tech/ng2-mobx

Answer 2

Я использую услугу, как это контролировать пользовательский интерфейс:

@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... 

Таким образом, у меня есть только один объект, который отражает мое текущее состояние пользовательского интерфейса ...