Angular 2 全局常量提供程序注入(inject)器方法

标签 angular

我有一个全局常量,例如我希望每个组件都可以访问的根目录。在另一个 stackoverflow 问题中,答案是创建一个常量类并将其导入每个组件。

有没有办法引导常量类,以便应用中的每个组件都可以访问它而无需任何额外导入?

到目前为止我已经有了这个,但它没有用,我如何引导常量类然后在我的组件中访问?

常量.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);
    }
}

最佳答案

回答您的问题:

  • 所有使用 Constants 类的组件都需要导入您的常量文件。

  • 为了使用 Constants 类,您需要将其注入(inject)到任何使用组件的构造函数中,从 random.component.ts 中删除 injector.get() 函数,如下所示:

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

您还可以将您的常量类装饰为 @Injectable@Inject 并将其添加到组件的构造函数中。

Here is a working plunker.

在应用级别引导共享常量是有益的,这样只创建该类的一个实例并在所有组件之间共享。

关于Angular 2 全局常量提供程序注入(inject)器方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35822486/

相关文章:

html - 无法解决angular4和html中的文本溢出

javascript - Angular 如何等待订阅

angular - 验证 Ionic 中是否选中了 ion-checkbox

javascript - 给 Angular 的 ngFor 的 i 变量加一个值

angular - 如何在 Angular 7 中设置 CdkVirtualScrollViewport 的初始索引(位置)

javascript - Angular 2 应用程序的范围

javascript - "angular2-image-upload"npm 库 CORS 错误

angular in-memory-web-api 简单查询字符串不适用于@字符

angular - Firebase Cloud Storage : permission denied. 在检索 downloadURL 时无法执行此操作 firebase

angular - 从主组件捕获模态 Controller 中的解雇事件