Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Global Constants Provider Injector Method

Tags:

angular

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);
    }
}
like image 846
ClickThisNick Avatar asked Mar 06 '16 02:03

ClickThisNick


People also ask

What does @inject do in Angular?

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.

What is the difference between providers and providedIn in Angular while using Dependency Injection?

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.

What is useExisting in Angular?

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.

What is useFactory Angular?

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.


2 Answers

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.

like image 67
pxwise Avatar answered Sep 23 '22 18:09

pxwise


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

like image 27
Nikhil Shah Avatar answered Sep 24 '22 18:09

Nikhil Shah