角2從一個組件發送對象到其他

我是新來的編程和angular2 ..在這裏我試圖發送對象從一個組件到其他單擊事件使用服務，但我沒有得到任何數據..角2從一個組件發送對象到其他

這是父組件...

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; 

    } 

}

這是service.ts ..

import { Injectable } from '@angular/core'; 

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

而且我不知道如果我這樣做的權利，請建議...

來源

2016-10-05 coder007

不要添加SelectedItemService到組件供應商。這樣每個組件都會得到它自己的實例。將它添加到NgModule的提供者中，那麼您將擁有整個應用程序的單個實例。

來源

2016-10-05 14:55:40

非常感謝你的時間......這是偶爾工作......大多數時候我把它作爲未定義的數據...只有兩次10次我能夠在屏幕上查看結果...其餘的時間仍然顯示空白...任何想法，爲什麼這可能會發生... – coder007

可能是一個時間問題。當你讀取'mservice.selectedItem'時，它可能還沒有從服務器到達。您需要使用observables鏈接異步調用，否則您無法預期可靠的行爲。有關很好的示例，請參閱https://angular.io/docs/ts/latest/cookbook/component-communication.html。 –

當你說服務器你的意思是精簡版服務器？因爲mservice.selectedItem不依賴於任何數據的API調用...即時通訊嘗試將已獲取的數據傳遞給不同的組件..所以它會在這種情況下發生？ – coder007

角2從一個組件發送對象到其他

回答

相關問題