相关疑难解决方法(0)

我真的很难在Angular 2应用程序中创建全局变量.

我已经用Google搜索并在过去的3个小时内阅读了StackOverflow上的很多帖子,但似乎我无法让它工作.我真的希望你能帮助我,我为提出这个问题而道歉.

所以我的文件名为globals.ts,如下所示:

import { Injectable } from "@angular/core";


@Injectable()
export class Globals {

  var role = 'test';

}

我想在我的组件的HTML视图中使用变量角色,如下所示:

{{ role }} 

我已经通过以下方式将globals.ts文件添加到我的app.module.ts:

providers: [
  Globals
],

无论我在这个文件上做了什么,它都没有用.我不想做的是必须手动导入每个组件中的globals.ts文件,这就是我想使用提供程序功能的原因.

我真的希望你能帮助我,再次抱歉.

最好的祝福,

AE

这是一个基本的TypeScript/ES.next示例,它使用DI的装饰器,并遵循框架手册建议的语法:

import {Component, Inject, Injectable, NgModule, OpaqueToken} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

const CONSTANT = { value: 'constant' };
const CONSTANT_TOKEN = new OpaqueToken;
const CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };

@Injectable()
class Service {
  constructor(@Inject(CONSTANT_TOKEN) constant) {
    console.log('Service constructor', constant);
  }
}

@Component({
  selector: 'app',
  template: '...',
  providers: [Service, CONSTANT_PROVIDER]
})
class AppComponent {
  constructor(@Inject(Service) service: Service, @Inject(CONSTANT_TOKEN) constant) {
    console.log('AppComponent constructor', service, constant);    
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: …