ember 中带有查询参数的链接答案

【问题标题】：link-to with query-params in emberember 中带有查询参数的链接
【发布时间】：2020-04-23 12:27:51
【问题描述】：

我正在尝试将一些查询参数作为组件参数传递，然后在link-to 上使用它。

{{activities/list-item
  model=submission
  task=model
  parent=parent
  group=model.group
  activitiesShowRoute=(concat "assignments.show.tasks.discuss.show." (pluralize submission.type) ".show")
  queryParams=(query-params allocation_id="all")
}}

然后我像这样使用它：

{{#link-to activitiesShowRoute group parent task model queryParams}}Click{{/link-to}}

它按预期工作，问题是如果我在queryParams 中调用没有值的组件，则生成的链接有href='#' 而不是没有查询参数的所需路由。

我不想在链接之外有一个{{#if queryParams}}，因为实际上我的链接内容非常复杂，我不想重复所有内容。

我可以让它按照我的意愿行事吗？谢谢

【问题讨论】：

标签： ember.js ember-cli query-parameters

【解决方案1】：

<LinkTo> 的现代尖括号版本支持带有查询参数的哈希：

<LinkTo @route="posts" @query={{hash direction="asc"}}>Sort</LinkTo>

这不仅是未来的证明和当前推荐的方式，而且还降低了您特定场景的复杂性，因为您不再需要使用 {{query-params}} 助手。

应用到您的代码中，它看起来像这样：

{{activities/list-item
  model=submission
  task=model
  parent=parent
  group=model.group
  activitiesShowRoute=(concat "assignments.show.tasks.discuss.show." (pluralize submission.type) ".show")
  queryParams=(hash allocation_id="all")
}}

<LinkTo
  @route={{@activitiesShowRoute}}
  @models={{@array @group @parent @task @model}}
  @queryParams={{@queryParams}}
>
  Click
</LinkTo>

如果您将{{activities/list-item}}（或尖括号语法中的<Activities::ListItem>）的公共API 更改为直接接受@route、@models 和@queryParams 参数，则可以进一步简化API。

内置组件的尖括号版本自 Ember 3.10 起可用。有关详细信息，请参阅release notes。它们是Ember Octane edition 的一部分。

【讨论】：

谢谢，很遗憾我无法将项目迁移到新版本的 Ember

【解决方案2】：

添加一个永久未使用的查询参数

queryParams=(query-params foo="bar")

【讨论】：

在用户将看到的 url 中添加一些不必要的东西远非理想，但谢谢
这在未来也不会起作用，因为在 Ember 4.0 中删除了 query-param 助手