Angular 角度2将对象从一个组件发送到另一个组件

我对编程和angular2.是新手。。在这里，我试图使用服务在单击事件时将对象从一个组件发送到另一个组件，但我没有得到任何数据

这是父组件

import { Component } from '@angular/core';
import {Http, Headers,Response } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import {SelectedItemService} from './selecteditem.service'

@Component({
    selector: 'newcomponent',
    providers:[SelectedItemService],
    template:`<p>

    </p>
    <h2>Your Title: {{nameValue}}</h2>
    <ul><li *ngFor="let list of lists">Hello {{ list }}</li></ul> 
    <form class="ui large form segment"> 
    <h3>Add a Link</h3> <div> 
     <label for="title">Title:</label>  
      <input [(ngModel)]="nameValue" placeholder="title" name="Title" >
      </div>   
      <label for="link">Link:</label>  <input name="link"></form>
      <div class=container *ngFor="let data of dataServer"
      [class.selected]="data === selectedItem"
       (click)="onSelect(data)"> 

         <div id="myimages">
         <a routerLink="/SecondNewCom">
         <img src="my_base_url/{{data.images.image3}}">
         </a>
   <router-outlet></router-outlet>
         </div>
<div class=caption>       {{data.productName}} </div></div>`,
    styleUrls: [`./app/mydoc.css`]



})
export class NewComponent {
    nameValue: string;
    lists: string[];
    url:string;
    dataServer:JSON[];
    length:number;
    selectedItem:JSON;


    constructor(private http:Http, public myservice:SelectedItemService) {
        this.myservice=myservice;
        this.nameValue = "declaredName";
        this.url="my_base_url";
        this.lists = ['abc', 'xyz', 'lol'];
this.http.get(this.url).map((res:Response) => res.json())
      .subscribe(
        data => { this.dataServer = data
            this.length=Object.keys(this.dataServer).length},
        err => console.error(err),
        () => console.log('done')
      );}

      onSelect(data:JSON):void{
            this.selectedItem=data;
            this.myservice.selectedItem=data;

      }
}

import {Component,Input} from '@angular/core';
import {SelectedItemService} from './selecteditem.service'
@Component({
    selector:'secondcomponent',
    providers:[SelectedItemService],
    template:`<h1> This is second new Component</h1>
    {{UiSelectedItem}}


   `

})
export class SecondComponent{
     UiSelectedItem:JSON;
     constructor(public mservice:SelectedItemService) {
        this.mservice=mservice;
        this.UiSelectedItem=mservice.selectedItem;

     }

}

---

另外，我不确定我是否做得对，请建议…

不要将

SelectedItemService

添加到组件的提供商。这样，每个组件都将获得自己的实例。将它添加到

NgModule

的提供者中，那么整个应用程序就只有一个实例了。

非常感谢您抽出时间。。。。这是工作偶尔。。。大多数情况下，我得到它作为未定义的数据。。。10次中只有两次我能在屏幕上看到结果。。。其余时间仍然显示空白。。。知道为什么会发生这种情况吗…可能是时间问题。当您阅读

mservice.selectedItem

时，它可能尚未从服务器到达。您需要使用可观察对象来链接异步调用，否则您无法期望可靠的行为。好的例子请看。当你说服务器时，你指的是lite服务器？？？因为mservice.selectedItem不依赖于任何api调用数据。。。我正在尝试将已获取的数据传递到其他组件。。那么在这种情况下也会发生吗？那么您的

http.get（）

调用与问题无关吗？如果您在

onSelect（）

中设置了服务的数据，并将其复制到

SecondComponent

的构造函数中，则该服务还没有数据。如果您复制构造函数中的数据，然后在

onSelect（）

中更改，则与创建的副本没有连接。您需要再次复制该值以在

SecondComponent

中获取更新后的值。这就是

可观察对象的用途。他们会通知潜艇更改。很抱歉打扰你。。。最终解决了问题实际上我在图像标签中创建了超链接，onclick直接进入新页面，父组件中没有调用onclick方法，因此没有发送objet数据：-D
import { Injectable } from '@angular/core';

    @Injectable()
    export class SelectedItemService {
        selectedItem:JSON;
    }