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
.
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
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));