Ember.js: configuring app settings
I am writing an emberjs application where I wrote a custom component to load images from a sprite file. However, I wanted to make the component generic and be able to load any image from the file specified in the template. For example, I want to be able to do something like below:
{{svg-icon css-class="" svg-sprite="svgs/svg-sprites.svg" svg-id="special"}}
I managed to get the component to work, but then I want to go ahead and instead of typing / specifying the svg file every time I want to customize the file in my application settings in config / environment.js
So, I thought I would write an ember initializer that will inject the ENV.APP config object in all of my components. So in my application initializer, I have the following code:
export function initialize(registry, application) {
application.register('config:main', window.MyApp, {instantiate: false});
application.inject('component', 'config', 'config:main');
}
The above works fine and in my javascript component I can just do:
this.get('config').SPRITE_LOCATION;
to get the location of the sprite file.
But I'm wondering if this is correct? Is there a better way to do this? Would it be better if I change the component to a CLI addon? How do I access the app config and make it available to my cli addon?
Thank you for your help.
source to share
This approach works well, if you want to use the app config in an addon you can use the Ember.getOwner () method.
For example, in your component file, you can add something similar:svgPath: computed(function () {
return get(Ember.getOwner(this).resolveRegistration('config:environment'), 'svgPath');
}),
source to share