Child controller can't retain service attr set in parent controller

Hi all,

read the community guideline while posting but this is a pretty tricky problem:

I’m working with a parent controller and child controller. I’m using a service to track value of an attribute. The parent page loads and after someActionwithQuery, it saves the query in the service The parent page is using a 3rd party JS library (EJ) where the link to child needs to be passed in as a string. So I can’t use LinkTo or TransitionTo.

service:

export default class QueryParamService extends Service {
  // Stores the validated query string so it can be used in multiple controllers/components
  @tracked queryString;

  @action
   someActionwithQuery() {}
  }

parent controller:

export default class parentController extends Controller {
    @service queryParam;

    @action
    saveParam(query){
       this.queryParam.queryString = query;
    }
}

I confirm that the service queryString saves the value

However when I call the service in childController, the value is null.

This problem happens particularly when I use the tag with href= parent/id/child/child_id to directly link to the child route. Also I noticed that this fires both parent and child routes, which is understandable as we’re traversing through the route tree.

export default class EnterpriseRoute extends Route {
  model_error = null

  model(params) {
    return this.store.findRecord('parent', params).then((record)=>{
      return record
    })
  }

  setupController(controller, parent) {
     super.setupController(controller, parent);
     window.parent_route = this;
}

export default class ParentChildRoute extends Route {

    model(params) {
      return this.store.findRecord('child', params.user_id, {include: 'parent'}).then((record)=> {
        return record
      })
    }

    setupController(controller, child) {
      super.setupController(controller, child);
}

5 posts - 2 participants

Read full topic