Question

我试图在路由时在页面之间传递一个对象（数组）。为此，我完全按照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[]已填满。更改页面后，它是空的。我错过了什么吗？

我知道之前已经问过这个问题，但我决定在问题顶部的链接中给出的答案的评论部分中根据要求提出问题。

Answer 1

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

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

这将创建一个新实例并将其注入此组件和子组件树。

如果您ReportService的{{1}}数组中也指定了providers，则孩子们可能会从那里获取他们的实例。

对于像这样的共享服务，我建议只将服务添加到@NgModule中的providers数组中。这为该模块中的所有组件提供了单个实例。而组件装饰器中的@NgModule数组为该组件提供了唯一的实例。

providers

路由时角度2传递对象

1 个答案: