typescript – 将Page / Global Variables传递到Angular2应用程

我在这里寻找一些最好的做法.我的angular2应用程序将存在于现有的内容管理系统中.因此,我需要捕获由此CMS生成的一些“变量”(如auth令牌等),并将其与我的angular2应用程序中的http请求一起使用.

当CMS显示index.html页面时,CMS会对其进行预解析,并在将页面发送到浏览器之前替换一些令牌(即[ModuleContext：ModuleId]).

这是我的index.html页面的示例(abreviated)：

<!-- 2. Capture CMS values to pass to app -->
<script type="text/javascript">
    var moduleId = parseInt("[ModuleContext:ModuleId]");
    var portalId = parseInt("[ModuleContext:PortalId]");
    var sf = $.ServicesFramework(moduleId);
</script>

<!-- 3. Configure SystemJS and Bootstrap App-->
<script type="text/javascript">
    System.config({
        packages: {
            //sets the root path of the Angular2 App
            'DesktopModules/KrisisShifts/app': {
                format: 'register',defaultExtension: 'js'
            }
        },map: { 'app': './app' }
    });
    System.import('app/boot')
            .then(null,console.error.bind(console));
</script>
<shift-app>Loading...</shift-app>

具体来说,$.ServicesFramework用于生成有效的http web.api请求.我想在一个可以注入到使用它的每个组件中的服务中捕获它.

例如(我正在使用打字稿)：

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

@Injectable()
export class dnnService implements OnInit{

    sf: any;

    constructor() {}

    ngOnInit() {
        if ($.ServicesFramework) {
            this.sf = $.ServicesFramework(moduleId);
        };
    }

}

一个问题是typescript编译器抛出错误,它无法找到“$”等.我可以通过在typescript类声明之前使用declare来强制执行此操作,如下所示：

//Global Variable Declarations
declare var $: any;
declare var moduleId: any;

题：

什么是捕获这些“全局”变量的更好方法(如果存在),以便在可扩展的应用程序中使用.

编辑 – 更新到RC6

我使用以下内容在RC6中工作：

@NgModule({
declarations: [
    AppComponent,FormatDatePipe,ShiftPartialPipe 
],imports: [
    BrowserModule,RouterModule.forRoot(AppRoutes),FormsModule,ReactiveFormsModule,HttpModule 
],bootstrap: [AppComponent],providers: [
    { provide: LocationStrategy,useClass: HashLocationStrategy },{ provide: dnnModId,useValue: moduleId },{ provide: dnnPortalId,useValue: portalId },{ provide: dnnEditMode,useValue: editMode },{ provide: dnnSF,useValue: $.ServicesFramework(moduleId) }
]
})

import {OpaqueToken} from '@angular/core';

export let SF = new OpaqueToken('sf');

@NgModule({
  providers: [{provide: SF,useValue: $.ServicesFramework(moduleId)},directives: [...]
  ...
})
class SomeModule {}

@Component({
   providers: [
    {provide: SF,]);
})
class SomeComponent {}

constructor(@Inject(SF) private sf:string) {}

import {OpaqueToken} from '@angular/core';

export let SF = new OpaqueToken('sf');

// import SF from shared library

bootstrap(AppComponent,[
    // other providers
    provide(SF,{useValue: $.ServicesFramework(moduleId)}),]);

// import SF from shared library

 constructor(@Inject(SF) private _sf: string){ }