角度サービスを使用する2つの角度4コンポーネント間でデータを渡すことができません。

Question

サービスを使用して角度コンポーネントから別の角度コンポーネントにデータを渡すことができません。ここではサービスコードは次のとおりです。

ここ

import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataService { 
    public serviceData: string; 
} 

がコンポーネントhomeです：

import {Component, OnInit, Input} from '@angular/core'; 
import {Router} from "@angular/router"; 
import { DataService } from '../common/common.service'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent { 

    constructor(public router: Router, public commonService: DataService) { 
    this.commonService.serviceData = 'Message from Home Component to App Component!'; 
    this.router.navigate(["overview"]); 
    } 

} 

ここで概要コンポーネントです：

import {Component, OnInit, Input} from '@angular/core'; 
import { DataService } from '../common/common.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-overview', 
    templateUrl: './overview.component.html', 
    styleUrls: ['./overview.component.css'] 
}) 
export class OverviewComponent { 
    constructor(public messageService: DataService) { 
    alert(this.messageService.serviceData); 
    } 
} 

OverviewComponentでアラートが常にundefinedを示しています。

Answer 1

コンポーネントレベルにDataServiceプロバイダを注入したので、そのインスタンスは現在のコンポーネントの子孫インジェクタツリーと共有されます。この場合、DataServiceのインスタンスはapp-home & app-overviewとなります。言い換えれば、角度はDataServiceの2つの異なるインスタンスを作成します。

共有型データプロバイダをルートモジュールprovidersメタデータオプションに登録すると、すべてのコンシューマが同じインスタンスにアクセスできるようにすることをお勧めします。コンポーネントレベルprovidersメタデータオプションからDataServiceを削除してください。

@NgModule({ 
    imports: [..], 
    declarations: [AppComponent, ...], 
    providers: [DataService, ...], //<- moved here 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 

}