web-dev-qa-db-de.com

Angular 5 Shared Service mit mehreren Daten

Im Internet fand ich ein Beispiel, wie man Daten für einen Dienst freigibt:

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

@Injectable()
export class DataService {

  private subject = new Subject<any>();

  sendData(phone: any) {
    this.subject.next(phone);
  }

  clearData() {
    this.subject.next();
  }

  getData(): Observable<any> {
    return this.subject.asObservable();
  }

}

Dann abonnieren wir Änderungen

subscription: Subscription;

this.subscription = this.dataService.getData()
  .subscribe(data => {
     this.someData= data;
  });

Ok, das funktioniert gut. Aber wenn ich mehr als ein Element teilen möchte? Es erscheint unvernünftig, diesen Code für jedes Element zu kopieren und nur den Namen zu ändern. Aber ich kann keine abstrakten Lösungen finden. Vielleicht mit Map und den Daten selbst, aber ich kann nicht verstehen, wie man Änderungen in diesem Fall abonniert und wie der Dienst aussehen sollte.

4
ch.45

Um dies zu erreichen, können Sie alle relevanten Werte in ein Wrapper-Objekt und dieses Objekt im Betreff (Verhalten) eingeben. Jeder Abonnent ändert den Inhalt bzw. die Inhalte seines persönlichen Wertes und schreibt den gesamten Wrapper zurück.

z.B.

Angenommen, Sie legen alle von Ihnen definierten Modelle in models.ts ab. Hier ist der Wrapper.

export class MyWrapper {
   constructor(
      public value1?: string,
      public value2?: number,
      public value3?: boolean
   ){}
}

Dann importieren Sie dieses Wrapper-Modell in Ihren Service und alle Abonnenten

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import { MyWrapper } from '../models/models';

@Injectable()
export class DataService {

  private subject = new Subject<MyWrapper>();

  sendData(wrapper: MyWrapper) {
    this.subject.next(wrapper);
  }

  clearData() {
    this.subject.next();
  }

  getData(): Observable<MyWrapper> {
    return this.subject.asObservable();
  }

}

Und bei einem der Abonnenten können Sie unabhängig davon, ob es sich um einen Dienst, eine Richtlinie oder eine Komponente handelt, den Wert ändern. Nur ein Beispiel! Es gibt viele Möglichkeiten, mit dem Wrapper vor und zurück zu arbeiten.

import { MyWrapper } from '../models/models';

private localWrapper: MyWrapper;

constructor(
 private dataService: DataService
){}

ngOnInit(): void {
   this.dataService.getData().subscribe(wrapper => {
      this.localWrapper = wrapper;
   });
}

// The wrapper in your service gets replaced and all subscribers
// get a fresh version of all contained values. This way you
// could exchange hundreds of values with only one set of methods
// and a single (Behavior)Subject.
private saveValue1(value: string): void {
   localWrapper.value1 = value;

   this.dataService.sendData(localWrapper);
}
6
Lynx 242

ich denke, die Lösung, die Sie suchen, ähnelt der Ngrx-Bibliothek. Sie möchten in diesem Fall ein Objekt mit unterschiedlichen Datenschichten (Telefone, Adressen, Namen usw.) erstellen und es in BehaviorSubject werfen. Jeder Teilnehmer kann dann die gewünschte Informationsschicht mit dem gewünschten Pluck-Operator von rxjs.if extrahieren Um bestimmte Datenebenen zu ändern, müssen Sie unveränderliche Daten verwenden, indem Sie den Spread-Operator anwenden und nur die benötigte Ebene ändern, während andere Ebenen intakt bleiben.

1
pavel_pleshko