Angular 4发出和订阅共享服务中的事件

本文介绍了Angular 4发出和订阅共享服务中的事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我要在我的主要组件中发出一个事件:

I am emitting an event in my main component:

mainponent.ts

mainponent.ts

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

这是我的sharedService.ts

Here is my sharedService.ts

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

在我的其他(子)组件中，我想访问此值，但是以某种方式，订阅不起作用:

In my other (Sub) Component, I want to access this value, but somehow, the subscription does not work:

dashboard.ts

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

我错过了什么吗?当我将数据作为Injectable传递时，它工作正常. 在一些REST调用之后发生(在主组件中)发出事件.

Am I missing something? It works fine when I pass the data as an Injectable. Emitting the event (in the main component) happens after some REST calls.

更新

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

So the problem is that the Subcomponent is created after the first emit of the event. I guess in this case it is better to inject the data into the subcompnent directly.

推荐答案

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

Update: Plunker example no longer maintained please use StackBlitz example here stackblitz/edit/stackoverflow-questions-45351598-angular?file=src%2Fapp%2Fappponent.ts

我已经使用您上面提供的代码创建了一个有效的插件示例. plnkr.co/edit/LS1uqB?p=preview

I have created a working plunker example using the code you provided above. 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 {}

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

View lifecycle hooks here angular.io/guide/lifecycle-hooks