无法使用 Angular 服务在两个角度 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提供程序，因此该实例将从当前组件共享到后代注入器树。所以在这种情况下DataServiceapp-home和app-overview的实例会有所不同，换句话说，Angular 将为DataService创建两个不同的实例。

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

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

Answer 2

我建议你使用rxjs主题。在服务中创建新的 rxjs 主题，如下所示

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {
myNewSubject = new Subject<any>();
informDataChanges(passyourobject){
this.myNewSubject.next(passyourobject);
}

}

当组件中发生更改或您希望将数据传递给另一个组件时，只需从组件调用此服务函数并将数据作为参数传递给此函数即可。你可以用这样的东西来做到这一点

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
constructor( private myService: MyService) { }
someFunction(){
this.myService.informLogout('somedata');//Passing data to service here
}
ngOnInit() {
}
}

现在，您需要做的就是在另一个组件中订阅该数据。重要主题会持续监视它的任何更改，数据将是连续流，并且将自动订阅。因此，最好在构造函数中订阅主题，更改将立即反映在该组件中。

你用这样的事情来做

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-another',
templateUrl: './another.component.html',
styleUrls: ['./another.component.css']
})
export class AnotherComponent implements OnInit {
constructor( private myService: MyService) {
this.myService.myNewSubject.subscribe(data=>{
console.log(data);
}) 
}

这样，您可以轻松地在任意数量的组件之间传递数据。