Triggering an action on the parent route from a component in the sub route

Question

In my application I currently have a parent route that manages my query params. I have a component that resets these params using a closure action. The current implementation works and looks like this:

// Component

import Component from '@ember/component';

export default Component.extend({
  tagName: '',
  actions: {
    actionTest() {
      this.get('onClick')()
    }
  }

});


  <div class="text-muted" style="cursor: pointer" {{action "actionTest"}}><small>{{text}}</small></div>

// Parent Route Controller

import Controller from '@ember/controller';

export default Controller.extend({

  actions: {
    resetAllParams() {
      this.set('param1', null)
      this.set('param2', null)
    }
  }

});

// Template

{{reset-params-button onClick=(action "resetAllParams") text="Reset Filters" size="xs"}}

I would like to move the component from the Parent Route Template to a Sub Route template. When I do this I no longer have the ability to reset the params - my understanding that it isn't possible to manipulate the params of a parent route on a sub-route.

I think that I need an extra step in the closure action feature but I don't understand it very well. I tried to use Ember Route Action Helper but this doesn't appear appropriate for this use case.

I tried to 'bubble up' the action by adding the following:

  // Sub-Route Template

{{reset-params-button onClick=(action "resetAllParams") text="Reset Filters" size="xs"}}

// Sub Route Controller

import Controller from '@ember/controller';

export default Controller.extend({
resetAllParams(){}
});

But it error'd out with a 'this.get is not a function' error from the action in the component controller.

Any help greatly appreciated

Gaurav Gaurav · Accepted Answer · 2018-09-11T14:19:06

You can inject the parent's route controller into the child's route controller. In the child's route controller:

@import Controller, { inject as controller } from '@ember/controller';

export default Controller.extend({
  parent: controller(), // use actual name of parent route controller

  actions: {
    resetAllParams() {
      this.get('parent').send('resetAllParams');
    }
  }
});

Hope this helps. For more information on injecting, see https://guides.emberjs.com/v3.4.0/applications/dependency-injection/#toc_ad-hoc-injections

Triggering an action on the parent route from a component in the sub route

1 Answers