使用Angular2中的服务在组件之间共享数据

Question

我正在使用angular2开发一个应用程序。我有一个场景，需要在路由时(使用router.navigate())将复杂的数据(对象数组)从一个组件传递到另一个组件(它们不是父子关系，而是两个独立的组件)。我在谷歌上搜索过，大多数结果描述了父子组件的场景。我浏览了结果，找到了这些传递数据的方法。

1)创建共享服务2)通过路由参数

第二种方法适合我（尽管我不喜欢上面解释的复杂数据）。我无法使用共享服务共享数据。所以我的问题是，使用服务在组件之间传递数据是否只在组件处于父子关系时有效？另外，让我知道是否有其他更喜欢的方式在一个组件和另一个组件之间传递数据？

已更新：我正在从我的方案中添加一些代码。请让我知道我的错误，为什么通过共享服务传递数据不起作用。

我有2个组件:1)SearchComponent 2)TransferComponent我正在search component中设置数据，并希望通过utilityService访问transfer component中的数据。

公用事业服务：

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

@Injectable()
export class UtilityService{
    constructor(){

    }
    public bioReagentObject = [];

    routeBioReagentObj(bioReagentObj){
        console.log("From UtilityService...", bioReagentObj);
        for (let each of bioReagentObj)
            this.bioReagentObject.push(each)
        // console.log("From UtilityService",this.bioReagentObject);
    }

    returnObject(){
        console.log("From UtilityService",this.bioReagentObject);
        return this.bioReagentObject
    }



}

searchcomponent.ts

    import {UtilityService} from "../services/utilityservice.component";
    import {Component, OnInit, OnDestroy, Input} from '@angular/core';

@Component({
    selector: 'bioshoppe-search-details',
    providers: [UtilityService],
    templateUrl: 'app/search/searchdetails.component.html',
    styleUrls: ['../../css/style.css']
})

export class SearchDetailsComponent implements OnInit, OnDestroy {
    constructor(private route: ActivatedRoute,
                private utilityService: UtilityService,
                private router: Router) {

    }
    @Input() selected: Array<String> = [{barcode:123, description:"xyz"}];

       //This method is called from .html and this.selected has the data to be     shared.
       toTransfer() {
        this.utilityService.routeBioReagentObj(this.selected);
        this.router.navigate(['/transfer']);

    }
}

TransferService.ts

import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {TransferService} from "../services/transferservice.component";
import {UserService} from "../services/userservice.component";
import {SearchService} from "../services/searchservice.component";
import {ActivatedRoute} from '@angular/router';
import {UtilityService} from "../services/utilityservice.component";


@Component({
    selector: 'bioshoppe-transfer',
    providers: [TransferService, UserService, SearchService, UtilityService],
    templateUrl: 'app/transfer/transfer.component.html',
    styleUrls: ['../../css/style.css', '../../css/transfer.component.css']
})

export class TransferComponent implements OnInit, OnDestroy{
    constructor(private transferService: TransferService,
                private userService: UserService,
                private searchService: SearchService,
                private utilityService: UtilityService,
                private route: ActivatedRoute
    ) {

    }
ngOnInit() {
// I am trying to access the data here, but it print "undefind"
console.log("From Transferpage",this.utilityService.returnObject());
}
}

我肯定有什么地方不对劲，但我就是想不出来。感谢任何帮助。

Answer 1

您可以通过使用Observable在两个组件之间共享数据来实现这一点。

我没有写这篇文章,但它很有用

一个快速的帖子，展示了一个让我卡了一段时间的例子 - 如何在Angular 2/4中的组件之间进行通信。

解决方案是使用可观察量和主体（这是一种可观察性）

http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

Answer 2

您需要区分服务何时来自NgModule，或者何时来自其他组件。

基础

在Angular2 compon的分层树

它是如何工作的

注入器的作用是将你在构造器中定义的服务注入到你的组件中，即找到它，如果找不到就启动并提供给你。当你把你想要的服务放入构造函数中时，它会从你的组件到根(即NgModule)查看注入器树中是否存在服务。如果injector发现该服务有一个已定义的提供者，但没有服务实例，它将创建该服务。如果没有供应商，价格会继续上涨。

到目前为止您已经看到了

你看到的是父组件德

一些多余的

通常，如果您想注入服务并且无法一直到root找到它，那么在编译/运行时期间会出现错误。但是，如果您定义要注入可选服务，则如果找不到此服务的提供程序，注入器不会失败。

或多或少

一些有用的链接：

> < Li > < p > https://angular . io/docs/ts/latest/guide/hierarchical-dependency-injection . html

https://blog.thoughtram.io/angular/2015/05/18/depe

Answer 3

卡马龙是对的。你的错误是你声明了两次实用程序服务：

1. 一旦进入SearchComponent的提供商。
2. 一旦进入TransferComponent的提供商。

您应该只声明一次服务，以确保两个组件获得相同的实例。为此，您可以选择以下任一选项：

< li >在声明中同时包含< code>SearchComponent和< code>TransferComponent的< code>@NgModule的提供程序中声明服务。十有八九这是正确的解决方案！ < li >在< code>@Component的提供程序中声明服务，该提供程序是< code>SearchComponent和< code>TransferComponent的父级。根据组件树的外观，这可能不可行。

以下选项# 1,你最终得到的:

@NgModule({
  imports: [CommonModule, ...],

  // Look, the components injecting the service are here:
  declarations: [SearchComponent, TransferComponent, ...],

  // Look, the service is declared here ONLY ONCE:
  providers: [UtilityService, ...]
})
export class SomeModule { }

然后注入<代码> UtilityService > < /代码在你的公司

@Component({
  selector: 'foo',
  template: '...',
  providers: []  // DO NOT REDECLARE the service here
})
export class SearchComponent {
  constructor(private utilityService: UtilityService) { }
}

@Component({
  selector: 'bar',
  template: '...',
  providers: []  // DO NOT REDECLARE the service here
})
export class TransferComponent {
  constructor(private utilityService: UtilityService) { }
}