Qual è un modo pulito per gestire lo stato in Angular e aggiornare i componenti?

Question

Qual è un modo pulito per gestire lo stato in Angular e aggiornare i componenti?

#1 da (0 voti)

1

Sto utilizzando un servizio per gestire lo stato in Angolare:

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

@Injectable()
export class DrawingAreaService {
  itemChange: Subject<string> = new Subject();

  private foo = 'foo';

  get bar() {
    return this.foo;
  }

  set bar(value) {
    this.foo = value;
    this.itemChange.next(value);
  }
}

E nel mio componente ho

get bar() {
  return this.service.bar;
}

ngOnInit() {
  this.service.bar = 'test value';
}

html:

{{ this.bar }}

Chiamando il servizio e aggiornando il valore bar su init non si attivano le modifiche del componente. Se invece ho impostato anche un campo sul componente, qualcosa come:

this.service.bar = 'test value';
this.bar = 'test value';

attiva il rilevamento delle modifiche.

Mi chiedo quale sia il modo migliore per gestire le modifiche di stato come questa, dovrei impostare solo il servizio e quindi chiamare detectChanges() ? Devo iscrivermi e impostare un campo di classe dall'abbonamento? Dovrei impostare due volte?

C'è un altro modo per farlo? Come posso farlo in un modo molto semplice?

state angular2

posta BrunoLM 24.07.2018 - 01:27

fonte

1 risposta

Leggi altre domande sui tag state angular2

Integrazione dei test con Model Checking In che modo "redux" disaccoppia i diversi componenti in modo che possano essere testati separatamente nei test unitari?

score 0 · Answer 1

Il tuo esempio non fornisce molte informazioni sul problema che stai cercando di risolvere, quindi è difficile dare una direzione più pratica, tuttavia ti suggerisco di usare osservabili in questa istanza e potenzialmente di eliminare la proprietà.

Qualcosa come:

@Injectable()
export class DrawingAreaService {
  itemChange: BehaviorSubject<string> = new BehaviorSubject();

  private foo = 'foo';

  get bar$() {
    return this.foo;
  }

  updateBar() {
    this.itemChange.next(value);
  }
}

Quindi il tuo componente può essere semplicemente:

bar: string = '';

ngOnInit() {
  this.service.bar$.subscribe(bar => this.bar = bar);
}

In alternativa, puoi ignorare il codice componente sopra riportato e utilizzare l'osservabile direttamente nel tuo modello:

<div>{{service.bar$ | async}}</div>

A seconda del tuo caso d'uso, un BehaviorSubject potrebbe essere una buona mossa dato che puoi usarlo direttamente per accedere all'ultimo valore.