I have a global constants like root directory that I want every component to have access to. In another stackoverflow question the answer was to create a constants class and import that to every component.
Is there a way to bootstrap a constants class so that every component in the app has access to it without any additional importing?
I have this so far but it is not working, how do I boostrap the constants class and then access then in my components?
constants.ts
export class Constants{
root_dir: string;
constructor(){
this.root_dir = 'http://google.com/'
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {Constants} from './constants'
bootstrap([
provide(Constants, {useClass: Constants})
]);
random.component.ts
import {Component, bind} from 'angular2/core';
import {Injector} from 'angular2/core';
@Component({
selector: 'my-app',
template: `{{test}}`
})
export class RandomComponent{
test: string;
constructor(){
this.test = injector.get(Constants.root_dir);
}
}
The @Injectable() decorator defines a class as a service in Angular and allows Angular to inject it into a component as a dependency. Likewise, the @Injectable() decorator indicates that a component, class, pipe, or NgModule has a dependency on a service. The injector is the main mechanism.
An Injectable configured with providedIn will be tree-shaken if it is not injected by any (eagerly or lazy loaded) class in its assigned injector scope. However, an Injectable assigned to a providers array in some module/component will never be tree-shaken, even if it is not injected anywhere.
The useExisting provider key lets you map one token to another. In effect, the first token is an alias for the service associated with the second token, creating two ways to access the same service object.
The useFactory field tells Angular that the provider is a factory function whose implementation is heroServiceFactory . The deps property is an array of provider tokens. The Logger and UserService classes serve as tokens for their own class providers.
To answer your questions:
All components using the Constants class will need to import your constants file.
In order to use the Constants class you need to inject it into the constructor of any consuming components, removing the injector.get() function from random.component.ts like so:
export class App {
constructor(constants: Constants) {
this.url = constants.root_dir;
}
}
You may also decorate your constant class as an @Injectable
and @Inject
it into the constructor of your component.
Here is a working plunker.
It is beneficial to bootstrap the shared constants at the app level so that only one instance of the class is created and shared among all components.
import {Component,bind,provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';
import {Constants} from 'src/constants'
import {ViewChild, Component, Injectable} from 'angular2/core';
@Component({
selector: 'my-app',
template: `{{test}}`,
})
export class App {
test: string;
constructor(cs:Constants){
this.test = cs.root_dir;
}
}
bootstrap(App, [Constants]);
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With