不能在angular2

Question

SERVICE--

import {Injectable} from '@angular/core'; 
import {UserData} from '../user-data/user-data.component'; 

@Injectable() 
export class UserDataService { 

    constructor(){} 
    userdata:UserData[]; 

    getData(){ 
     console.log('service',this.userdata); 
     return this.userdata; 
    } 

    setData(user:any){ 
     this.userdata=user; 
     console.log(this.userdata); 
    } 
} 

USER-DATA-类显示从一个组件发送到另一阵列---

export class UserData { 
    firstname: string; 
    middlename: string; 
    lastname: string; 
    email: string; 
    contact: number; 
} 

的Component1 -

import { Component,OnInit,OnDestroy } from '@angular/core'; 
import { UserData } from '../../user-data/user-data.component'; 
import { ViewEditUser } from '../../view-edit-user/view-edit-user.component'; 
import {UserDataService} from '../../user-data-service/user-data-service.service'; 

@Component({ 
    selector: 'form-page', 
    templateUrl: `app/add-user-sidebar/user-form/form.component.html`, 
    providers:[UserDataService] 
}) 

export class Form implements OnInit,OnDestroy { 

    userdetail:UserData; 
    constructor(private service:UserDataService){ 
    } 

    addUser(first:string,middle:string,last:string,emailid:string,contactno:number){ 
     this.userdetail=({firstname:first,middlename:middle,lastname:last,email:emailid,contact:contactno}) 
     console.log(this.userdetail); 
     this.service.setData(this.userdetail); 
    } 

    ngOnInit(){ 
    } 

    ngOnDestroy(){ 
    } 
} 

Component2--

import { Component,Input, OnInit } from '@angular/core'; 
import { Form } from '../add-user-sidebar/user-form/form.component'; 
import {UserData} from '../user-data/user-data.component'; 
import { WelcomePage } from '../welcome-page/welcome-page.component'; 
import {UserDataService} from '../user-data-service/user-data-service.service'; 

@Component({ 
    selector:'view-edit', 
    templateUrl: 'app/view-edit-user/view-edit-user.component.html', 
    providers: [UserDataService] 
}) 

export class ViewEditUser implements OnInit { 
    arraydata:any; 
    constructor(private service:UserDataService){} 

    // arraydata:any; 
    printarray(){ 
     console.log(this.arraydata); 
    } 
    ngOnInit() 
    { 
     this.arraydata=this.service.getData(); 
     console.log("hhghdfghdf",this.arraydata);  
    } 

} 

我的新angular2，我有模块中的两个部件，一个部件是一个形式，其中用户输入的数据，该数据然后被发送到一个服务，当我console.log然后我可以看到服务中的数据。但是当我尝试从第二个组件访问该数组时，我无法访问数据该怎么做？

Answer 1

您需要使用observables在组件之间传递数据。

在你的服务中创建一个Subject类型的变量，并在你的第一个组件中做一个.next将数据传递给服务，并在你的第二个组件中订阅服务的可见性，它会得到你的数据。

你没有得到，因为这将通过观测

Answer 2

如果您提供的每个组件的服务，您不能使用它进行通信处理的JavaScript的异步行为的数据，因为每个组件将获得一个不同的服务实例。

如果一个组件是另一个组件的父（祖先），则只有在父组件上提供它。 否则将其提供给作为两者的父代（anjestor）的组件或仅在@NgModule()中提供以使服务成为全局组件。

您还需要注意，一个组件可能在另一个组件读取之前读取值，具体取决于您设置值的位置以及创建组件的顺序。 使用BehaviorSubject通常可以避免这个缺陷，因为这样做首先创建哪个组件或者如果一个组件尝试读取，而另一个组件尚未设置值，则无关紧要。

对于到角实例之间共享型又见How to share service between two modules - @NgModule in angular2?