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

Question

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

我有一个列表组件和一个卡片组件来显示 phone 和名称。

angular2 或angular4 如何将项目数据传递到卡片组件中？我需要知道点击了哪张卡片并显示正确的 phone/name.

在 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) 将信息作为路线的一部分传递。您可以通过三种方式执行此操作：必需参数、可选参数或查询参数。

我在这里有详细信息：

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"}])
}

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

passing data between components or route, angular4

angular2-routing

angular