路由时,我试图在页之间传递对象(数组)。为此,我做了this answer所说的,但这对我不起作用。
服务

@Injectable ()
export class ReportService extends HttpService {

    public selectedReports: any[] = [];

    public setSelectedReports (id: string, value: any) {
        this.selectedReports[id] = value;
    }

    public removeSelectedReports (id: string) {
         delete this.selectedReports[id];
    }
}

起源
import { ReportService } from './';

@Component({
  providers: [ReportService]
})

export class ReportComponent {
  constructor (private reportService: ReportService) {}
}

儿童1
import { ReportService } from '../';
@Component({
  template: '<a [routerLink]="['stats']">Stats</a>'
})

export class ReportHomeComponent {

  constructor (private reportService: ReportService) {
    reportService.setSelectedReports (1, 'hello')
  }
}

儿童2
import { ReportService } from '../';

@Component({
})

export class ReportStatsComponent {

  constructor (private reportService: ReportService) {
    console.log(reportService.selectedReports)
  }
}

如果我在第一个孩子中单击a,我将被重定向到第二个孩子。在更改页面之前,selectedReports[]将被填充。换页后,它是空的。我遗漏了什么吗?
我知道这个问题以前有人问过,但我还是决定在问题顶部的链接中给出的答案的评论部分中,根据请求提出这个问题。

最佳答案

您可能以两种不同的方式导入服务。在正在使用的父组件中:

@Component({
  providers: [ReportService]  //<--unique instance injected into this component
})

这将创建一个新实例并将其注入此组件和子组件树中。
如果在ReportServiceproviders数组中也指定了@NgModule,那么孩子们很可能从那里获得他们的实例。
对于这样的共享服务,我建议只将服务添加到providers中的@NgModule数组。这为该模块中的所有组件提供了一个实例。而组件装饰器中的providers数组为该组件提供了唯一的实例。
@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [ReportService],  //<--inject service here to be global to module
  bootstrap: [AppComponent]
})

10-01 11:47