Angular 2 Global Constants Méthode d'injecteur de fournisseur

J'ai une des constantes globales comme la racine du répertoire que je veux que tous les composants aient accès. Dans un autre stackoverflow question, la réponse a été de créer une des constantes de la classe et de les importer à chaque composant.

Est-il un moyen pour amorcer une des constantes de la classe, de sorte que chaque composant de l'application a accès, sans aucune importation?

J'ai jusqu'à présent, mais ça ne fonctionne pas, comment puis-je bootstrap les constantes de la classe et ensuite accéder ensuite dans mes composants?

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);
    }
}

source d'informationauteur ClickThisNick

  1. 8

    Pour répondre à vos questions:

    • Tous les composants à l'aide de l'une des Constantes de la classe aura besoin d'importer votre fichier de constantes.

    • Afin d'utiliser les Constantes de la classe vous avez besoin pour l'injecter dans le constructeur de composants consommant de l', enlever l'injecteur.get() de la fonction de hasard.composante.ts:

    export class App {
  constructor(constants: Constants) {
    this.url = constants.root_dir;
  }
}

    Vous pouvez aussi décorer votre constante de la classe comme une @Injectable et @Inject dans le constructeur de votre composant.

    Ici, c'est un travail plunker.

    Il est bénéfique pour l'amorçage de l'partagé constantes au niveau application, de sorte que seule une instance de la classe est créée et partagée entre tous les composants.

  2. 2
    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]);

    Démo

  3. 0
    import {Component} from 'angular2/core'
import { Constants } from './constants'

@Component({
    selector: 'test',
    template: `  
                    Constants: <strong>{{ urlTemplate }}</strong>

              `
    providers:[Constants]

})

export class AppComponent{

  constructor(constants: Constants){
    this.urlTemplate = constants.root_dir;
  }

}

    Vous pouvez utiliser l'ajout de Constants dans providers:[Constants]

    Le décorateur @Injectable, Il n'est pas nécessaire dans ce cas, mais Google recommande de toujours utiliser Vous pouvez le voir ici: https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#pourquoi est-injectable-

    /*
We recommend adding @Injectable() to every service class, even those that don't have dependencies and, therefore, do not technically require it. Here's why:
Future proofing: No need to remember @Injectable when we add a dependency later.
Consistency: All services follow the same rules, and we don't have to wonder why a decorator is missing
*/

//@Injectable() 
export class Constants{
  root_dir: string;

  constructor(){
      this.root_dir = 'http://google.com/'
    }
  }

    Plunker

    Sur @Inject utilisé, vous pouvez lire quelque chose ici:
    quelle est la différence entre l'utilisation (@Inject(Http) http: Http) ou pas

    Maintenant, si vous voulez ce à l'échelle mondiale peut ajouter dans bootstrap

    //main entry point
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app';
import { Constants } from './constants';


bootstrap(AppComponent, Constants)
  .catch(err => console.error(err));

    //import { Injectable } from 'angular2/core'

//@Injectable()
export class Constants{
root_dir: string;

  constructor(){
      this.root_dir = 'http://google.com/'
    }
  }

    import {Component, Inject} from 'angular2/core'
import { Constants } from './constants';

@Component({
    selector: 'test',
    template: `  
                    Constants: <strong>{{ urlTemplate }}</strong>

              `

})


export class AppComponent{

  constructor(@Inject (Constants) constants: Constants){
    this.urlTemplate = constants.root_dir;
  }

}

    Plunker