перемещение данных между страницами в угловом 2

Question

Я пытаюсь передать данные между двумя компонентами, но у меня есть некоторые проблемы с ним. Когда новый компонент (страница) загружается, я теряю данные, которые я передал в свою службу. Вот что я получил:

// store-data.service.ts 
import {Injectable} from "@angular/core"; 
@Injectable() 
export class StoreDataService { 
    private storedData: any; 
} 

-

// search.component.ts 
import {Component, Input, OnInit} from '@angular/core'; 
import {Router}      from "@angular/router"; 
import {SearchService}    from "./search.service.ts"; 
import {StoreDataService}   from "./store-data.service.ts"; 

@Component({ 
    selector: 'search', 
    templateUrl: 'search.component.html', 
    providers: [ SearchService, StoreDataService ] 
}) 
export class SearchComponent implements OnInit { 

    resDisplay: [{ id: number, name: string, books: string[] }] = []; 

    constructor(private searchService: SearchService, 
       private storeDataService: StoreDataService) { } 

    ngOnInit() { 
     this.searchService.getResults(searchValue) 
      .subscribe(res => { this.resDisplay = res; }); 
    } 

    clickRes(id:number) { 
     let choice = this.resData.filter(res => res === id); 
     this.storeDataService.storedData = choice[0]; 
     this.router.navigate(['detail-page']; 
    } 
} 

-

// page-detail.component.ts 
import {Component, Input, OnInit} from '@angular/core' 
import {ActivatedRoute} from '@angular/router' 
import {StoreDataService} from "../../core/store-data/store-data.service"; 

@Component({ 
    selector: 'detail-page', 
    templateUrl: 'detail.component.html', 
    providers: [ DetailSearchService, StoreDataService ] 
}) 
export class PageDetailComponent implements OnInit { 
    detils: MoreDetails; 

    constructor(private detailSearchService: DetailSearchService, 
       private storeDataService: StoreDataService) { 
    } 

    ngOnInit() { 
     console.log(this.storeDataService.storedData); 

     /* do stuff utilizing the storedData 
     * and get more infor from the detailSearchService. 
     */ 
    } 
} 

Я могу видеть storedData получать значение из SearchPage. Но когда я пытаюсь выплюнуть его на DetailPage, он не определен.

Я также попытался реализовать StoreDataService с использованием Observables с тем же результатом на detailPage.

Что я делаю неправильно или не хватает?

Answer 1

Если вы предоставляете услуги внутри @Component,

@Component({ 
    selector: 'search', 
    templateUrl: 'search.component.html', 
    providers: [ SearchService, StoreDataService ]<-- new instance 
}) 

Эта услуга будет иметь новый экземпляр. Если вы хотите иметь один экземпляр этой службы среди ваших компонентов, находящихся в одном модуле, определите ее внутри модуля (@NgModule). Если они не находятся в одном модуле, создайте совместно используемый модуль и определите его там.