Question

我试图在两个组件之间传递数据，但我遇到了一些问题。加载新组件（页面）时，我丢失了传递给服务的数据。这就是我所拥有的：

ROWNUM

-

// 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'];
    }
}

我可以看到storedData接收来自SearchPage的值。但是当我尝试在DetailPage上吐出它时，它是未定义的。

我也尝试使用Observables实现StoreDataService，在detailPage上使用相同的结果。

我做错了什么或错过了什么？

Answer 1

如果您在@Component，

内提供服务

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

该服务将有一个新实例。如果要在同一模块中的组件中拥有此服务的单例实例，请在模块（@NgModule）内定义它。如果它们不在同一个模块中，那么创建一个共享模块并在那里定义它。

以角度2在页面之间移动数据

1 个答案: