ember.js - Need to show/hide a button depending on the page

Question

I am trying to hide back button on site-header that takes me to dashboard. I am using pod structure that is something like this:

• pod
  • component
    • site-header
      • template.hbs
      • component.js
  • main
    • dashboard

In the component.js I used computed to get current route

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';

export default Component.extend({
router: service (),
 dashboard:computed('currentRouteName',function(){
    if(this.get('currentRouteName') === 'main.dashboard.index'){
      return true;
    }
    return false;
})
})

question from:https://stackoverflow.com/questions/65918044/need-to-show-hide-a-button-depending-on-the-page

Answer 1

You mention that the computed property is in the component.js, and you are doing this.get('currentRouteName'), but that property does not exist in components.

I believe you need to use the router service in your component.

I'm assuming you are using pre-Octane syntax, so it should look something like this:

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';

export default Component.extend({
   router: service(),

   dashboard: computed('router.currentRouteName',function() {
    if (this.get('router.currentRouteName') === 'main.dashboard.index') {
      return true;
    }

    return false;
  })
});

I don't remember which version RouterService was first available, but I hope this helps!