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

我在此处有详细信息：Sending data with route.navigate in Angular 2

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

2 个答案: