Ember通过出口关闭动作

Question

我正在构建一个简单的Ember应用程序，但是当在可导航容器的{{outlet}}中呈现子组件时，将动作关闭传递给子组件时遇到了困难。

就上下文而言，这是我正在构建的美观惊人的应用程序的快速浏览：

我有一个roles/role路径，该路径显示带有以下标记的组件（上面的黄色部分）。请注意，此组件的模型是Role的实例：

// file: app/components/role.hbs

<p>{{@role.name}}</p>

<div>
  {{sel-nav-tabs items=this.tabConfig}}
  <div class='route-content'>{{outlet}}</div>
</div>
（（“ sel”代表“别人的图书馆”。）

将向该出口提供适当的列表组件，users或privileges。

用户列表由以下组件呈现。请注意，该模型是其父级与Role关联的User实例的列表：

// file: app/components/role/user-list.hbs

<ul>
  {{#each @users as |user|}}
    <li>
      {{user.name}}
      {{#sel-button type="toolbar" onActivate=this.removeUser}}
        {{sel-icon/remove-circle}}
      {{/sel-button}}
    </li>
  {{/each}}
</ul>
并且当单击按钮时，它将调用RoleUserListComponent类中定义的操作：

// file: app/components/role/user-list.js

import Component from '@glimmer/component';
import { action } from "@ember/object";

export default class RoleUserListComponent extends Component {

  @action removeUser(user) {
     // remove the user model from the role... but which role?
  }
}
收获是用户与角色之间的关系是多对多的，所以我不能简单地取消用户的所有者并让Ember Data处理事务。显而易见的答案似乎是将动作关闭从角色组件传递到其子用户列表组件。

除了，似乎没有办法通过{{outlet}}传递动作结束。我所希望的是：

{{outlet onActivate=(action removeUser @role)}}
它将把闭包传递给在那里渲染的任何组件。我改而尝试在孩子中使用{{yield user}}来让父项呈现“删除”按钮并给予适当的操作，但这也会触碰插座壁。

我还尝试使用控制器，但记录得不够好，可能是因为控制器的作用似乎在Ember的成熟过程中正在急剧发展。但是，尽管this brief explanation确实提到了传递动作，但并未详细说明，而我发现的少数几个最新示例在插座加入聚会时似乎都中断了。

我怀疑{{outlet}}只是普通的不适合闭包。

虽然定义一个服务可能会起作用，但这似乎并不是该服务的目的，我会在全球范围内忙于解决本地问题。

通过网点获取消息的最佳实践是什么（或者实际上是任何实践）？我寻找了查询路径早期部分的方法，但是没有找到相关类中定义的任何内容。

我正在构建一个简单的Ember应用程序，但是当在可导航容器的{{outlet}}中呈现子组件时，将动作关闭传递给子组件时遇到了困难。对于上下文，...

Answer 1

[{{outlet}}只支持一个可选的字符串参数，用于命名插座，没有其他，因此您将无法通过使用{{outlet}}来实现！