无法使用角度服务在两个角度4组件之间传递数据

无法使用服务将数据从一个角度组件传递到另一个角度组件。下面是服务代码：无法使用角度服务在两个角度4组件之间传递数据

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。

来源

2017-08-02 iJade

有一个在[DOC]一堆例子（https://stackoverflow.com/documentation/angular/10836/sharing-data-among-components#t=201708021351339613133） – Nehal

的可能的复制[如何分享组件之间的数据使用正确的服务？]（https://stackoverflow.com/questions/40468172/how-to-share-data-between-components-using-a-service-properly） –

服务是为了单例，这是一个类的单个实例。由于它是单身人士，它可以保留一组任何数据并跨组件共享。为了确保一个服务是一个单身人士，它只能一次注册。您通过将它添加到两个组件的[[providers]数组中来注册它两次。推荐的方法是注册它与应用程序模块，如下所示：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/ – DeborahK

由于您已在组件级别注入DataService提供程序，该实例将从当前组件共享到后代注入器树。因此，在这种情况下，您有DataService实例app-home & app-overview将会有所不同，换句话说，Angular会为DataService创建两个不同的实例。

建议的做法是在根模块providers元数据选项上注册可共享数据提供程序，以便每个使用者都将访问同一个实例。确保从组件级providers元数据选项中删除DataService。

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

}

来源

2017-08-02 13:48:13

尝试相同，但仍然无法传递数据。它显示undefined – iJade

你是否按照上面的答案并从两个组件中删除“提供者：[DataService]”？ –

@DeanChalk是的，我确实从组件 – iJade

无法使用角度服务在两个角度4组件之间传递数据

回答

相关问题