在组件或路径之间传递数据，angular4

Question

我有一张卡片清单，每张卡片都有一些数据，例如{"phone":"333-123-4566", "cust_name":"john smith"}

我有一个列表组件和一个卡组件来显示电话和姓名。

angular2或angular4如何将商品数据传递到卡片组件中？ 我需要知道单击了哪个卡并显示正确的电话/名称。

在Angular 1中，使用ngModel非常简单，但是我没有在angular2 / 4中找到简单的解决方案。

<ul>
  <li *ngFor="let item of items; let i=index;">
    <a routerLink="/card" > {{item.cust_name}} </a>
  </li>
</ul> 

Answer 1

两种最常见的选择是：

1）将信息作为路线的一部分传递。 您可以通过三种方式执行此操作：必需，可选或查询参数。

我在这里有详细信息： 在Angular 2中使用route.navigate发送数据

2）定义一个保存数据的服务，并从两个组件访问该服务。

我在这里有一个示例： https : //blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Answer 2

 <ul>
      <li *ngFor="let item of items; let i=index;">
        <a routerLink="['/card', {"phone":"333-123-4566", "cust_name":"john smith"}]"> {{item.cust_name}} </a>
      </li>
    </ul>     

<ul>
      <li *ngFor="let item of items; let i=index;">
        <a (click)=navigate(item)> {{item.cust_name}} </a>
      </li>
    </ul> 


navigate(item) : void {  
  this.router.navigate(['/card', {"phone":"333-123-4566", "cust_name":"john smith"}])
}