社区首页 >问答首页 >将页面/全局变量传递到Angular2应用程序，以便与服务一起使用

问将页面/全局变量传递到Angular2应用程序，以便与服务一起使用
EN

Stack Overflow用户

提问于 2016-02-04 18:02:41

回答 2查看 10K关注 0票数 5

我在这里寻找一些最佳实践。我的angular2应用程序将存在于现有的内容管理系统中。因此，我需要捕获由这个CMS生成的一些“变量”(比如auth令牌等)，并在我的angular2应用程序中使用它们。

当CMS显示index.html页面时，CMS会对其进行预解析，并在将页面发送到浏览器之前替换一些标记(即ModuleContext:ModuleId)。

下面是我的index.html页面的一个示例(缩写)：

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

}

一个问题是，类型记录编译器抛出错误，它找不到"$“等等。我可以通过在类型记录类声明之前使用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) }
]
})

angular

angular2-services

typescript

回答 2

Stack Overflow用户

发布于 2016-08-17 20:07:33

为了稍微扩展Gunther的答案，我也在RC5中这样做了，除了没有将它添加到引导程序(以前版本)中的提供者之外，您将令牌作为一个提供程序放置在正在进行引导的新@ngModule装饰器中。例如：

@NgModule({
    bootstrap: [MyComponent],
    declarations: [MyComponent],
    imports: [BrowserModule],
    providers: [
        { provide: OpaqueToken, useValue: someObject }
    ]
})
export class AppModule { }

browserDynamicPlatform().bootstrapModule(AppModule);

票数 2

Stack Overflow用户

发布于 2016-08-31 07:00:28

不确定这是否是最佳实践，但我也遇到了同样的问题，我正在使用的解决方案(RC5就绪)如下：

步骤1)将您的设置类创建为@Injectable：

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

   @Injectable()

   export class MyAppSharedSettings {

        appName: string = "My Application Name";
        appTitle: string = "My Application Title";
        appVersion: string = "1.0.0.0 beta";
        welcomeMessage: string = "Welcome";
        userName: string = "";
   }

(步骤2)在您的主模块上，如果您还没有导入以下内容：

 //Imports required for NgModule directive
 import { NgModule }                          from '@angular/core';
 import { BrowserModule }                     from '@angular/platform-browser';
 import { HttpModule }                        from '@angular/http';

 //Imports required for your code to run
 import { MyAppMainComponent }               from './myapp.component';
 import { MyAppSharedSettings }              from './myapp.shared-settings';

因此，您已经将类标记为可注入的(步骤一)，并将其用于任何想要使用它的组件(步骤2)。现在，下一步只是把它放在组件的构造函数中。

 //Imports: Angular & Packages Related
 import { Component, Inject }            from '@angular/core';

 //You must import your injectable class in every component you plan to use it
 import { MyAppSharedSettings }          from '../../myapp.shared-settings';

 //defining how our component will be presented/used
 @Component({
     selector: 'my-content',
     templateUrl: './app/components/content/content.component.html',
     styleUrls: ['./app/components/content/content.component.css']
 })

 //here you name your variable as you please
 export class MyContent {
     yourVariableName: MyAppSharedSettings;

     constructor(private eafSettings: MyAppSharedSettings) {
         this.yourVariableName = eafSettings;
  }
 }

(最后一步)，在这里，我们如何在HTML中使用它：

 <h3 class="page-title">
     {{ yourVariableName.welcomeMessage }}<small> {{ yourVariableName.userName}}</small>
    </h3>
    <div class="row about-header">
        <div class="col-md-12">
            <h1>{{ yourVariableName.appName}}</h1>
            <h2>{{ yourVariableName.appTitle }}</h2>
            <a href="#platform"><button type="button" class="btn btn-danger uppercase">Start</button></a>
        </div>
    </div>
 </div>