title: Ember passing an action closure through an outlet
body: <p>I am building a simple Ember app, but I have run into difficulty passing an action closure to a child component when that component is rendered in the <code>{{outlet}}</code> of a navigable container.</p>
  
  <p>For context, here is a quick look at the aesthetically-astonishing app I have been building:</p>
  
  <p><a href="https://i.stack.imgur.com/1zzu6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zzu6.png" alt=""></a>
  I have a <code>roles/role</code> path that displays a component (the yellow section above) with the following markup. Note that the model for this component is an instance of a Role:</p>
  
  <pre><code>// file: app/components/role.hbs
  
  &lt;p&gt;{{@role.name}}&lt;/p&gt;
  
  &lt;div&gt;
    {{sel-nav-tabs items=this.tabConfig}}
    &lt;div class='route-content'&gt;{{outlet}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(Where "sel" stands for "someone else's library".)</p>
  
  <p>this.tabConfig is defines in the corresponding class:</p>
  
  <pre><code>// 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' },
      ];
  
    }
  
  }
  </code></pre>
  
  <p>Into the outlet in role.hbs will be rendered the appropriate list component, either <code>users</code> or <code>privileges</code>.</p>
  
  <p>The users list is rendered by the following component. Note that the model is the list of User instances associated with the Role from its parent:</p>
  
  <pre><code>// file: app/components/role/user-list.hbs
  
  &lt;ul&gt;
    {{#each @users as |user|}}
      &lt;li&gt;
        {{user.name}}
        {{#sel-button type="toolbar" onActivate=this.removeUser}}
          {{sel-icon/remove-circle}}
        {{/sel-button}}
      &lt;/li&gt;
    {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>and when the button is clicked it calls an action defined in the RoleUserListComponent class:</p>
  
  <pre><code>// 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?
    }
  }
  </code></pre>
  
  <p>The catch is that the relationship between users and roles is many-to-many, so I can't simply unset the user's owner and let Ember Data take care of things. The obvious answer seemed like passing an action closure from the role component to its child user-list component.</p>
  
  <p>Except, there seems to be no way to pass the action closure through the <code>{{outlet}}</code>. What I was hoping for was something like:</p>
  
  <pre><code>{{outlet onActivate=(action removeUser @role)}}
  </code></pre>
  
  <p>which would pass the closure to any component that was rendered there. I tried instead to use <code>{{yield user}}</code> in the child to let the parent render the delete button and give it the appropriate action, but that also hit the outlet wall.</p>
  
  <p>I also tried to use controllers, which aren't documented that well, probably since their role seems to have been evolving dramatically over Ember's maturation. But while <a href="https://guides.emberjs.com/release/routing/controllers/" rel="nofollow noreferrer">this brief explanation</a> does mention passing down actions, it doesn't go into details, and the few up-to-date examples I found all seem to break when an outlet joins the party.</p>
  
  <p>I'm suspecting that <code>{{outlet}}</code> just plain isn't closure-friendly.</p>
  
  <p>While defining a service would probably work, that doesn't seem to be what services are intended for, and I'd be cluttering up my global space to solve a local problem.</p>
  
  <p>What is the best practice (or, really, any practice) for dealing with getting messages through outlets? I looked for ways to query the earlier parts of the path, but I didn't find any that were defined in the relevant classes.</p>
  
  <p>EDIT to add more detail:</p>
  
  <p>The route template for <code>/roles/role</code> is simply:</p>
  
  <pre><code>// file app/templates/roles/role
  
  {{role role=@model}}
  </code></pre>
  
  <p>Where the Role component is in the first listing above. (I also added the role.js file contents above.) My reasoning for doing that was that by making a component I created a logical place to put the config (rather than inline helper functions) and it just gave me a sense of tidiness to have all ui elements be in components.</p>
  
  <p>If a refactor can be the anchor to a good solution (essentially copying the entire Role component into the route template), however, I'll happily do it.</p>