Question

我希望有一个名为_contextPath的变量，它是JSP中的一个Javascript评估变量，目前在systemjs.config.js中可用 - 我试图尝试在Typescript服务中提供此_contextPath变量。

我想知道_contextPath变量是否可以传递给名为job.service.ts

的Typescript服务

这是我的文件夹结构：

├── scripts
│   └── mec-irs
│       ├── app
|       |    ├── app.component.ts
|       |    ├── app.module.ts
|       |    ├── app.routes.ts
|       |    └── jobs
|       |          ├── job.ts
|       |          ├── job.routes.ts
|       |          └── job.service.ts     
│       ├── db.json
│       ├── GruntFile.js
│       ├── index.html
│       ├── node
│       ├── node_modules
│       ├── package.json
│       ├── style.css
│       ├── systemjs.config.js
│       ├── tsconfig.json
│       ├── typings
│       └── typings.json
├── views
│   ├── mec.jsp

mec.jsp通过Javascript调用获取上下文并将其存储在名为_contextPath的变量中：

<html>
<head>
  <title>MEC IRS</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script>var _contextPath = "${pageContext.request.contextPath}";</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="..<%=request.getContextPath()%>/scripts/mec-irs/style.css">

  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="..<%=request.getContextPath()%>/scripts/mec-irs/node_modules/core-js/client/shim.min.js"></script>
  <script src="..<%=request.getContextPath()%>/scripts/mec-irs/node_modules/zone.js/dist/zone.js"></script>
  <script src="..<%=request.getContextPath()%>/scripts/mec-irs/node_modules/reflect-metadata/Reflect.js"></script>
  <script src="..<%=request.getContextPath()%>/scripts/mec-irs/node_modules/systemjs/dist/system.src.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="..<%=request.getContextPath()%>/scripts/mec-irs/systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err){ console.error(err); });
  </script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

_contextPath中使用了systemjs.config.js：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': _contextPath + '/scripts/mec-irs/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: _contextPath + '/scripts/mec-irs/app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Java Web应用程序上下文虽然在job.service.ts mec中是硬编码的。我想知道如何将_contextPath传递给名为job.service.ts的这个打字稿服务。如下所示，上下文mec被硬编码为/mec/admin/irs/jobs/，这是一个Web服务端点：

import {Injectable, Inject}    from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

// Decorator to tell Angular that this class can be injected as a service to another class
@Injectable()
export class JobService {

      // Class constructor with Jsonp injected
      constructor( @Inject (Http)private http:Http) { }

      // Base URI for Spring Batch Admin
      private jobsUrl = '/batch/';

      //TODO wish not to have hardcoded context, like below
      //private mecUrl = '/' + _contextPath + '/admin/irs/jobs/';
      private mecUrl = '/mec/admin/irs/jobs/';

      // Stop Spring Batch Job by its name
      stopJobByName(name: string) {
        const endPoint = name + '/stopIrsJobPoller';
        return this.http.get(this.mecUrl + endPoint)
            .map(res => res.json());
    }
.
.
.

Answer 1

您需要在应用程序初始化时运行并获取服务器端设置的内容。我是这样做的。

创建一个类来存储服务器端配置：

export class AppConfig {
    public ContextPath: string;
};

创建服务以从JSP获取后端配置：

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

import { AppConfig } from './app.config';

@Injectable()
export class ConfigService {
    private _config: AppConfig;

    constructor(private http: Http, private config: AppConfig) {
    }

    public Load(): Promise<AppConfig> {
        return new Promise((resolve) => {
            this.http.get('./views/mec.jspn').map(res=>res.json())
                .subscribe((config: AppConfig) => {
                    this._config = data;
                    resolve(this._config);
                }, (error: any) => {
                    this._config = new AppConfig();
                    resolve(this._config);
                });
        });
    }

    public Get(key: any): any {
      return this._config[key];
    }
}

然后通过提供ConfigService作为APP_INITIALIZER的提供者来在您的应用模块初始化中对其进行升级：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http, HttpModule } from '@angular/http';
import { APP_INITIALIZER } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ConfigService } from './shared/services/index';
import { AppConfig } from './app.config';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: (configService: ConfigService) => () => configService.Load(),
            deps: [ConfigService, Http, AppConfig],
            multi: true
        },
        ConfigService,
        AppConfig
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

然后通过在任何其他服务中注入ConfigService来简单地使用它：

import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Injectable } from '@angular/core';

import { ConfigService } from './config.service';

@Injectable()
export class AppService {
    constructor(
        private _http: Http,
        private _config: ConfigService
    ) {
      console.log(_config.Get('ContextPath'));
    }
}

将Web应用程序上下文传递给Angular2 Service

1 个答案: