Question

这是我的第一个组件
要求：在第一个组件发送的第二个组件中显示数据。

当前状态：我将数据设置为服务获取方法并获取数据数据但无法显示由第一个组件模板设置的相同数据。

import { Component } from '@angular/core';
import { ConfigService } from './myservicedata';
import { Router } from '@angular/router';// add file for navigate from one page to another page 

@Component({
  selector: 'tab-one',
  templateUrl: './tabone.component.html',
   providers:[ConfigService]  
})
export class taboneComponent {
  constructor(public configservice:ConfigService,private router:Router) {}
  formData(data:any){
    this.configservice.set_service_data(data);
    console.log("value of data which is set by me into service"+ data);
}

// for navigate from one url to another url
navigate(){
  this.router.navigateByUrl('/tab_two');

}

}

这是我的第二个组件

import { Component ,OnInit} from '@angular/core';
 import { ConfigService } from './myservicedata';
 import 'rxjs/Rx'; // add this file for use the map feature.
@Component({
  selector: 'tab-two',
  templateUrl: './tabtwo.component.html',
    // providers:[ConfigService]  
})

export class tabtwoComponent {
  public getterSetter:any=[];
  // public  store_service_data:any=[];
   constructor(private configservice:ConfigService) {}
      ngOnInit(){
        this.configservice.get_service_data()       
      }        

showdata(){
  console.log( this.configservice.get_service_data());

}

};

这是我的服务

import {Injectable} from '@angular/core';
import {Http,Response} from "@angular/http";
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';


@Injectable()
export class ConfigService {
  private _url:string="../mockData.json";
 public serviceData:any=[];
 get_service_data():any{
    return  this.serviceData;
    //  this.serviceData.map(
    //    (response:Response) =>  response.json()
    //  );        
                       }; 

 set_service_data(value:any):void{
     this.serviceData=value;
                                 };

constructor(private http:Http) {}
  // Uses http.get() to load a single JSON file  
  getFriendsData():any {
    return this.http.get(this._url).map(
        (response:Response) =>  response.json()            
                                       );
  }

};

Answer 1

删除TaboneComponent中的提供者数组，并确保ConfigService中的app.module.ts位于提供者数组中

<强>解释

要从服务中检索您想要的信息，请确保您的两个组件都引用ConfigService上的相同实例

Angular使用层次依赖注入，这意味着每当请求像ConfigService这样的依赖项时，Angular将遍历组件树以找到已经提供它的位置并将该实例传递给请求者。 / p>

因此，您可以通过在app模块中提供服务来轻松创建单例实例，因为每个组件都是其中的一个。

当你提供像TaboneComponent中所做的那样的服务时，你说的是给我一个新的服务实例，即使已经在其他地方提供了这个服务。作为tab-one子代的任何组件都将能够获取您在该服务中设置的数据，但任何非儿童的组件都不会。

您可以在此处阅读有关Angular的依赖注入的更多信息：

https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

使用get set方法在角度2中共享服务数据b / w两个分量

1 个答案: