Angular 2全局常量提供者注入方法

Question

我有一個全局常量，如根目錄，我希望每個組件都有權訪問。 在另一個stackoverflow問題中，答案是創建一個常量類並將其導入到每個組件。

有沒有辦法引導常量類，以便應用程序中的每個組件都可以訪問它而無需任何其他導入？

到目前為止，我有這個，但它不起作用，如何提升常量類，然后在我的組件中訪問？

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

Answer 1

回答你的問題：

• 使用Constants類的所有組件都需要導入常量文件。

• 為了使用Constants類，你需要將它注入任何消耗組件的構造函數中，從random.component.ts中刪除injector.get（）函數，如下所示：

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

您也可以裝飾你的常量類作為一個@Injectable和@Inject到你組件的構造函數。

這是一個工作的plunker。

在應用程序級別引導共享常量是有益的，這樣只能在所有組件之間創建和共享該類的一個實例。

Answer 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]);

演示

Answer 3

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

}

您可以在providers:[Constants]使用添加Constants providers:[Constants]

---

裝飾者@Injectable在這種情況下沒有必要，但谷歌建議總是使用你可以在這里看到： https ：//angular.io/docs/ts/latest/guide/dependency-injection.html#！#why-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

---

關於@Inject使用，你可以在這里閱讀一下： 使用（@Inject（Http）http：Http）之間有什么區別？

---

現在如果你想要全局可以添加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