如何在 Angular 中将按钮单击时的数据从一个组件传递到另一个组件？答案

【问题标题】：How can I pass data on button click from one component to another in Angular?如何在 Angular 中将按钮单击时的数据从一个组件传递到另一个组件？
【发布时间】：2019-02-11 01:48:47
【问题描述】：

HTML：

 <button [routerLink]="['/Request']">Request</button>

我在此组件中获取产品名称、产品 ID 等数据。

/Request 是另一个视图，我需要在单击按钮时将用户重定向到该视图（现在我正在通过 [routerLink] 实现此目的）并将值 product.id 传递给该视图，因为我想使用该观点的价值。

数据：

我的数据是列表的形式，每次点击按钮都会有不同的ID。

单击按钮时，我无法将值传递给另一个视图。最好的方法是什么？

【问题讨论】：

stackoverflow.com/questions/37880876/…
@WenHaoWu 使用查询参数是不安全的。我已经知道了。这就是为什么我要求最好的方法

标签： angular typescript

【解决方案1】：

您需要通过 URL 传递值。为此，首先，您需要在路由文件中声明它。例如：

{
  path: 'request/:clientId
  component: RequestComponent
}

之后，只需将其添加到您的路线中。你可以这样做：

<button [routerLink]=['/request', client.id]">Request</button>

或

<button routerLink="/request/{{ client.id }}">Request</button>

【讨论】：

使用它安全吗？向 URL 公开 ID？
有什么办法可以隐藏吗？
安全与否，取决于您的应用程序和传输的内容。据我所知，您拥有的另一个选择是使用@Input/@Output（父子关系）或创建一个特定的服务来做到这一点。