如何通过路由在 Angular 2 的 2 个组件之间发送 Array/list/JSON？答案

【问题标题】：How to send Array/list/JSON between 2 components Angular 2 by routing?如何通过路由在 Angular 2 的 2 个组件之间发送 Array/list/JSON？
【发布时间】：2017-06-27 09:34:43
【问题描述】：

我不知道如何让它变得更好。我想在 2 个 Angular 组件之间发送 JSON。我正在考虑路由，但是如何在这之间发送诸如 POST 之类的东西，到我知道如何使用 @inputs/@Outputs 的组件，但我必须更改 Url 并重新加载内容。问题是它不仅是 id，而且是检查 ide 的列表。

组件

  selectedAll = [];// it is array od Id [1,2,3,4...];
  goToDetail(): void {
    this.selectedIDService.saveIds(this.selectedLight);
    console.log( "Show: "+this.selectedIDService.retrieveIDs().length); <-- give me good number

    this.router.navigate(['/detailSearch']);
  }

HTML 按钮很有趣

<button  class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"  (click)="gotoDetail()">

我当然想在我的 detailSearch 组件上得到这个。

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

@Injectable()
export class SelectedIdService {

  public myIds: Array<Number>=[];
  constructor() { }

  saveIds(produIds:any){
    this.myIds = produIds;
    console.log(this.myIds);
  }
  retrieveIDs():any[]{
    return this.myIds;
  } 
}

--------其他组件-------

 providers : [SelectedIdService]
constructor( private route: ActivatedRoute,
               private  selectedIdService :SelectedIdService) { }
  ngOnInit() {
     var selected:any[] =this.selectedIdService.retrieveIDs();<<-- empty
}

你知道为什么吗？

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案1】：

使用 service 将 id 数组从一个组件保存到另一个组件。通过 url 传递它不是一种安全的方法。

创建这样的服务，

import { Injectable } from '@angular/core';
@Injectable()
export class AppMessageQueuService {

    myIds: Array<Number>=[];
    constructor() {

    }
    saveIds(produIds:any){
        this.myIds = produIds;
    }
    retrieveIDs(){
        return this.myIds;
    }

}

然后您可以将此服务注入到两个组件中并从第一个组件中保存它，例如，

this.appMsgService.saveIds(yourIds);

然后在第二个组件中检索为，

this.appMsgService.retrieveIDs(yourIds);

你可以注入到你的组件中，

constructor(
   private appMsgService: AppMessageQueuService
)

【讨论】：

也许它不安全，但它正在工作的企业想要更改链接，所以我必须这样做。
在其他组件中我有空数组:(
这不是问题:)
selected-id.service.ts:11 (4) [1, 2, 3, 4] search-standard.component.ts:87 show: 4 detail-result.component.ts:29显示 0

【解决方案2】：

在 2 个 Angular 组件之间发送 JSON，您需要使用提供者服务。 official docs

【讨论】：