web-dev-qa-db-fra.com

Angular 4 émettant et abonnant à un événement dans un service partagé

J'émets un événement dans mon composant principal:

main.component.ts

this.sharedService.cartData.emit(this.data);

Voici mon sharedService.ts

import { Component, Injectable, EventEmitter } from '@angular/core';
export class SharedService {
    cartData = new EventEmitter<any>();
}

Dans mon autre composant (Sub), je souhaite accéder à cette valeur, mais d'une manière ou d'une autre, l'abonnement ne fonctionne pas:

tableau de bord.ts

private myData: any;

constructor(private sharedService: SharedService) {
    this.sharedService.cartData.subscribe(
        (data: any) => myData = data,
        error => this.errorGettingData = <any>error,
        () => this.aggregateData(this.myData));
}

Est-ce que je manque quelque chose? Cela fonctionne bien lorsque je transmets les données en tant qu'injectable . L'émission de l'événement (dans le composant principal) se produit après certains appels REST.

Mettre à jour

Le problème est donc que le sous-composant est créé après la première émission de l'événement. Je suppose que dans ce cas, il est préférable d’injecter les données directement dans la variable subcompnent.

angularsubscriptioneventemittersharedservices
4
Stef

Mettre à jour: L’exemple Plunker n’est plus maintenu, veuillez utiliser StackBlitz exemple ici https://stackblitz.com/edit/stackoverflow-questions-45351598-angular?file=src%2Fapp%2Fapp.component.ts

J'ai créé un exemple de travail de plunker en utilisant le code que vous avez fourni ci-dessus. https://plnkr.co/edit/LS1uqB?p=preview

import { Component, NgModule, Injectable, EventEmitter, AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@Injectable()
export class SharedService {
    cartData = new EventEmitter<any>();
} 

@Component({
  selector: 'app-app',
  template: `
    <h1>
      Main Component <button (click)="onEvent()">onEvent</button>
    </h1>
    <p>
      <app-dashboard></app-dashboard>
    </p>
  `,
})
export class App implements AfterViewInit {
  data: any = "Shared Data";

  constructor(private sharedService: SharedService) {
  }

  ngAfterViewInit() {
    this.sharedService.cartData.emit("ngAfterViewInit: " + this.data);
  }

  onEvent() {
    this.sharedService.cartData.emit("onEvent: " + this.data);
  }
}

@Component({
  selector: 'app-dashboard',
  template: `
    <h2>
      Dashboard component
    </h2>
    <p>
      {{myData}}
    </p>
  `,
})
export class AppDashboard implements AfterViewInit {
  myData: any;

  constructor(private sharedService: SharedService) {
          this.sharedService.cartData.subscribe(
          (data: any) => {
            console.log(data);
            this.myData = data;
          });
  }

}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, AppDashboard ],
  providers: [ SharedService ],
  bootstrap: [ App ]
})
export class AppModule {}

Voir les cycles de cycle de vie ici https://angular.io/guide/lifecycle-hooks

6
J J B

Essaye ça: 

export class SharedService {
    private dataPusher = new Subject<any>();
    cartData = dataPusher.asObservable().pipe(shareReplay(1));

    pushData(value:any) {
       this.dataPusher.next(value);
    }
}

Cela permet de rejouer la dernière valeur émise pour l'abonné "en retard" . Si vous souhaitez qu'une valeur initiale soit émise, vous pouvez utiliser BehaviourSubject - la valeur initiale est celle du constructeur.

Ou vous pouvez diriger/chaîner avec startWith opérateur.

cartData = dataPusher.asObservable().pipe(startWith("someValue"), shareReplay(1));
0
dK-