Emberjs passing params to components that come from a service

I'm trying to put together a dynamic navbar, in doing so I want all the buttons to be adjustable per route.

Each button is a very simple component for example:

<!--features/components/button-edit/template.hbs-->

    Edit

and

//features/components/button-edit/component.js
export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['nav-item'],
});

I have a service

// features/navigation/service.js
export default Ember.Service.extend({
  visibleOptions: []
});

and inside each route I pass into the service which buttons I want to display on that route

//features/accounts/view/route.js:4
export default Ember.Route.extend({

  navigationService: Ember.inject.service('navigation'),

  activate() {
    this.get('navigationService').set('visibleOptions', ['button-new', 'button-edit']);
  },

});

So I can loop over them in the frontend

This works well and does what I want, the problem is I can't figure out how I can pass things like models into the button component. For example the edit button needs the model.id for the link...

So how can I go about getting things into each component, should I try and read them off the controller once inside the component, or should they be passed in somehow?