javascript – App.settings – Angular方式？

我想在我的App中添加一个App Settings部分,它将包含一些consts和预定义的值.

我已经读过使用Opaquetoken的this answer但它在Angular中已被弃用.这个article解释了这些差异,但没有提供完整的例子,我的尝试都没有成功.

这是我尝试过的(我不知道这是不是正确的方法)：

//ServiceAppSettings.ts

import {InjectionToken, Opaquetoken} from "@angular/core";

const CONfig = {
  apiUrl: 'http://my.api.com',
  theme: 'suicid-squad',
  title: 'My awesome app'
};
const FEATURE_ENABLED = true;
const API_URL = new InjectionToken<string>('apiUrl');

这是我想要使用这些consts的组件：

//MainPage.ts

import {...} from '@angular/core'
import {ServiceTest} from "./ServiceTest"

@Component({
  selector: 'my-app',
  template: `
   <span>Hi</span>
  ` ,  providers: [
    {
      provide: ServiceTest,
      useFactory: ( apiUrl) => {
        // create data service
      },
      deps: [

        new Inject(API_URL)
      ]
    }
  ]
})
export class MainPage {


}

但它不起作用,我得到错误.

题：

如何以Angular方式使用“app.settings”值？

plunker

NB当然我可以创建Injectable服务并将其放在NgModule的提供者中,但正如我所说的,我想用注入方式的InjectionToken来做.

解决方法:

我想出了如何使用InjectionTokens执行此操作(请参阅下面的示例),如果您的项目是使用Angular CLI构建的,则可以使用/ environments中的环境文件进行静态应用程序范围设置(如API端点),但这取决于您的项目因为环境文件只是对象文字,所以最有可能最终使用这些要求,而使用InjectionToken的可注入配置可以使用环境变量,因为它是一个类可以应用逻辑来根据应用程序中的其他因素配置它,例如初始http请求数据,子域等

注入令牌示例

/app/app-config.module.ts

import { NgModule, InjectionToken } from '@angular/core';
import { environment } from '../environments/environment';

export let APP_CONfig = new InjectionToken<AppConfig>('app.config');

export class AppConfig {
  apiEndpoint: string;
}

export const APP_DI_CONfig: AppConfig = {
  apiEndpoint: environment.apiEndpoint
};

@NgModule({
  providers: [{
    provide: APP_CONfig,
    useValue: APP_DI_CONfig
  }]
})
export class AppConfigModule { }

/app/app.module.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppConfigModule } from './app-config.module';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    AppConfigModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在你可以把它转换成任何组件,服务等：

/app/core/auth.service.ts

import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { APP_CONfig, AppConfig } from '../app-config.module';
import { AuthHttp } from 'angular2-jwt';

@Injectable()
export class AuthService {

  constructor(
    private http: Http,
    private router: Router,
    private authHttp: AuthHttp,
    @Inject(APP_CONfig) private config: AppConfig
  ) { }

  /**
   * Logs a user into the application.
   * @param payload
   */
  public login(payload: { username: string, password: string }) {
    return this.http
      .post(`${this.config.apiEndpoint}/login`, payload)
      .map((response: Response) => {
        const token = response.json().token;
        sessionStorage.setItem('token', token); // Todo: can this be done else where? interceptor
        return this.handleResponse(response); // Todo:  unset token shouldn't return the token to login
      })
      .catch(this.handleError);
  }

  // ...
}

然后,您还可以使用导出的AppConfig键入检查配置.

javascript – App.settings – Angular方式？

相关推荐