Angular 4 在共享服务中发送和订阅事件

Question

我在主组件中发出一个事件：

main.component.ts

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

这是我的共享服务.ts

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

在我的另一个(子(组件中，我想访问此值，但不知何故，订阅不起作用：

仪表板.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));
}

我错过了什么吗？当我将数据作为注射对象传递时，它工作正常。 发出事件(在主组件中(发生在一些 REST 调用之后。

更新

所以问题是子组件是在事件第一次发出后创建的。我想在这种情况下，最好将数据直接注入subcompnent。

Answer 1

更新：Plunker示例不再维护，请使用StackBlitz 这里的例子 https://stackblitz.com/edit/stackoverflow-questions-45351598-angular?file=src%2Fapp%2Fapp.component.ts

我使用您上面提供的代码创建了一个工作 plunker 示例。 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 {}

在此处查看生命周期挂钩 https://angular.io/guide/lifecycle-hooks

Answer 2

试试这个：

export class SharedService {
private dataPusher = new Subject<any>();
cartData = dataPusher.asObservable().pipe(shareReplay(1));
pushData(value:any) {
this.dataPusher.next(value);
}
} 

这样做的作用是，它将重播"迟到"订阅者的最后一个发出值。 如果你想发出一个初始值，你可以使用BehaviourSubject- 它在构造函数中取初始值。

或者你可以用管道/链条startWith操作员。

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