相关疑难解决方法(0)

如何在Angular 2中创建单件服务?

我已经读过,当引导应该让所有孩子共享相同的实例时注入,但我的主要和头部组件(主应用程序包括头部件和路由器出口)都获得了我的服务的单独实例.

我有一个FacebookService,用于调用facebook javascript api和一个使用FacebookService的UserService.这是我的引导程序:

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);
Run Code Online (Sandbox Code Playgroud)

从我的日志记录看起来,引导调用结束,然后我看到FacebookService然后在每个构造函数运行的代码,MainAppComponent,HeaderComponent和DefaultComponent之前创建UserService:

在此输入图像描述

typescript angular2-routing angular2-services angular

131
推荐指数
7
解决办法
12万
查看次数

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

我正在使用angular2开发一个应用程序.我有一个场景,我需要在路由时使用复杂数据(对象数组)从一个组件传递到另一个组件(它们不是父子,它们是两个独立的组件)(使用router.navigate()).我用Google搜索了这一点,大部分结果都描述了父子组件的场景.我已经完成了结果并找到了传递数据的方法.

1)创建共享服务2)作为路由参数传递

第二种方法对我有效(尽管如此,当我有如上所述的复杂数据时,我不喜欢这种方法).我无法使用共享服务共享数据.所以我的问题是,使用服务的组件之间传递数据只在组件处于父子关系时才有效吗?另外,请告诉我是否还有其他优先方法可以在一个组件和另一个组件之间传递数据?

更新:我在我的场景中添加了一些代码.请让我知道为什么通过共享服务传递数据不起作用的错误.

我有2个组件:1)SearchComponent 2)TransferComponent我在SearchComponent中设置数据,并希望通过utilityService访问TransferComponent中的数据.

公用事业服务

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
    }



}
Run Code Online (Sandbox Code Playgroud)

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) …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular2-components angular

17
推荐指数
1
解决办法
2万
查看次数