角4發射和在共享服務

我在我的主發光成分的事件訂閱的事件：角4發射和在共享服務

main.component.ts

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

這是我的sharedService.ts

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

在我的其他（子）組件，我想訪問這個值，但不知何故，認購不工作：

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調用之後。

**************更新***************** 所以問題是子組件是在第一個發射之後創建的的事件。我想在這種情況下，最好直接將數據注入子組件。

來源

2017-07-27 Stef

你在哪裏提供sharedService？服務實例可能不相同，如果您在不同模塊中提供服務，則會發生這種情況。 –

我在父app.module.ts提供程序中聲明瞭它：[SharedService ...]， – Stef

以及這兩個組件如何同時加載？在不同的路線？ –

我使用上面提供的代碼創建了一個工作的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

來源

2017-07-27 13:26:16

這工作正常，因爲它的工作與點擊監聽。我試圖找出當我在代碼中發出事件時必須使用哪個函數。 – Stef

它也適用於ngAfterViewInit，它是角度生命週期鉤子的一部分。檢查出https://angular.io/guide/lifecycle-hooks –

我將我的版本更改爲ngAfterViewInit，它在我點擊某處時起作用。當應用程序最初加載時，子組件會在第一個事件觸發後加載，因爲我在main.component.html中聲明瞭它。1）發光事件 2）儀表板構造函數 3）儀表板AfterViewInit – Stef

角4發射和在共享服務

回答

相關問題