Can i access ember service variables in my whole application? - ember.js

Question

I Created an ember service and i initialized its value now i updated that value in a controller. I want this updated variable in my complete application ? What should i supposed to do. Any help will be appreciated. Thanks

Answer 1

Just dummy example
Service
// header.js
import Service from '#ember/service';
export default Service.extend({
currentRoute: null
});
Route
import Route from '#ember/routing/route';
import { inject as service } from '#ember/service';
import { set } from '#ember/object';
export default Route.extend({
header: service(),
beforeModel() {
set(this, 'header.currentRoute', 'login');
}
});
Any controller
import Controller from '#ember/controller';
import { computed, get } from '#ember/object';
import { inject as service } from '#ember/service';
export default Controller.extend({
header: service(),
currentRoute: computed('header.currentRoute', function() {
return get(this, 'header.currentRoute');
})
});
I hope you understood the idea

Answer 2

Please look at this article from the ember guide https://guides.emberjs.com/release/components/triggering-changes-with-actions/#toc_invoking-actions-directly-on-component-collaborators
You did the correct thing, once you already set an updated value of that variable in your service that value will be the same until you instructed your code to change the value of that variable. To answer your question, Can i access ember service variables in my whole application? Yes you can, you can do the following to access the variable into your application.
Assuming that this is your variable and service name
//services/current-session.js
import Service from '#ember/service';
export default Service.extend({
foo: 'foo bar baz',
});
If you want to access it in your controller please do the following
import Controller from '#ember/controller';
import { computed } from '#ember/object';
import { inject as injectService } from '#ember/service';
export default Controller.extend({
currentSession: injectService(),
bar: computed('currentSession.foo', function() {
return this.currentSession.foo;
}),
});
If you want to access it in your component
import Component from '#ember/component';
import { computed } from '#ember/object';
import { inject as injectService } from '#ember/service';
export default Component.extend({
currentSession: injectService(),
bar: computed('currentSession.foo', function() {
return this.currentSession.foo;
}),
});
The approach above is based on ember-cli 3.4 Here's an ember-twiddle you can play around. https://ember-twiddle.com/b92a7d4fa03a1699a5b8a79aca5d2782?openFiles=controllers.application.js%2C
If you want to change the value of your variable in your service through your controller you can do this
import Controller from '#ember/controller';
import { set } from '#ember/object';
import { inject as injectService } from '#ember/service';
export default Controller.extend({
currentSession: injectService(),
actions: {
change() {
this.currentSession.set('foo', 'foo bar baz please');
}
}
});

Answer 3

working twiddle.
Steps:
1) create a service:
app/services/service-name.js
import Service from '#ember/service';
export default Service.extend({
name: "hello",
changeName(name) {
this.set('name', name);
}
});
2) Create an initializer so you need not to inject the service in every route/controller/component.
app/initializers/inject-service-name.js
export function initialize(application) {
application.inject('controller', 'serviceName', 'service:service-name');
// if needed
// application.inject('route', 'serviceName', 'service:service-name');
// application.inject('component', 'serviceName', 'service:service-name');
}
export default {
initialize
};
once initializer is created kindly restart your ember server.
3) Usage:
app/controller/application.js
import Controller from '#ember/controller';
export default Controller.extend({
init() {
this._super(...arguments);
// print initial value
console.log(this.get('serviceName').name); // hello
// change value of name property in service
this.get('serviceName').changeName("hai");
// print changed value
console.log(this.get('serviceName').name); // hai
}
});