无法在angular2中显示从一个组件发送到另一个组件的数组答案

【问题标题】：cannot display array sent from one component to other in angular2无法在angular2中显示从一个组件发送到另一个组件的数组
【发布时间】：2018-02-09 08:52:35
【问题描述】：

服务--

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);
    }
}

用户数据类 ---

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

组件1 --

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(){
    }
}

组件2--

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 时，我可以看到服务中的数据。但是当我尝试从第二个组件访问该数组时，我无法访问数据该怎么办？

【问题讨论】：

检查这个 -> jasonwatmore.com/post/2016/12/01/…
你可以在服务中持有值，并尝试从服务中访问值
你可以在这个答案中看到实现：stackoverflow.com/a/45833455/2900305 在那种特殊情况下，问题是关于 Number 类型的，但同样适用对象也是如此。

标签： javascript angular typescript

【解决方案1】：

如果你在每个组件上提供服务，你不能用它来通信，因为每个组件会得到不同的服务实例。

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

您还需要注意，一个组件可能会在另一个组件设置值之前读取，这取决于您设置值的位置以及组件的创建顺序。使用BehaviorSubject 通常可以避免这种陷阱，因为这样一来，首先创建哪个组件或一个组件是否尝试读取而另一个组件尚未设置值都无关紧要。

对于 Angular 实例之间的共享，另请参阅 How to share service between two modules - @NgModule in angular2?

【讨论】：

这个答案详细描述了在模块中使用服务的组件之间共享数据。更多细节可以在stackoverflow.com/questions/40089316/…找到
这个答案是关于同一页面上 2 个不同 Angular 应用程序之间的通信。无论如何感谢您找到它，最近正在寻找它，找不到它。

【解决方案2】：

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

在您的服务中创建一个主题类型变量，并在您的第一个组件中执行 .next 以将数据传递给服务，在您的第二个组件中，订阅服务可验证，它将为您获取数据。

由于 JavaScript 的异步行为将由 observables 处理，您无法获取数据

【讨论】：