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”代表“其他人的图书馆”。）

this.tabConfig 在对应的类中定义：

// file: app/components.role.js

import Component from '@glimmer/component';

export default class RoleComponent extends Component {

  get tabConfig() {

    return [
      { label: 'Users', route: 'roles.role.users' },
      { label: 'Privileges', route: 'roles.role.privileges' },
    ];

  }

}

进入 role.hbs 中的 outlet 将呈现适当的列表组件， users或privileges 。

用户列表由以下组件呈现。 请注意，模型是与其父级角色关联的 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 的成熟而发生了巨大的变化。 但是，虽然这个简短的解释确实提到了传递动作，但它没有详细说明，而且我发现的少数最新示例似乎都在出口加入聚会时中断了。

我怀疑{{outlet}}只是简单的不是闭包友好的。

虽然定义服务可能会奏效，但这似乎不是服务的目的，而且我会弄乱我的全局空间来解决本地问题。

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

编辑以添加更多细节：

/roles/role的路由模板很简单：

// file app/templates/roles/role

{{role role=@model}}

Role 组件在上面的第一个列表中。 （我还在上面添加了 role.js 文件内容。）我这样做的原因是，通过制作一个组件，我创建了一个逻辑位置来放置配置（而不是内联辅助函数），它只是给了我一种整洁的感觉让所有 ui 元素都在组件中。

但是，如果重构可以成为一个好的解决方案的锚点（本质上是将整个 Role 组件复制到路由模板中），那么我会很乐意这样做。

Answer 1

{{outlet}}仅支持命名插座的一个可选字符串参数，不支持其他任何参数，因此您将无法通过使用{{outlet}}来实现这一点！