如何在角度 4 中使字符串保持不变？答案

【问题标题】：How to make a string constant in angular 4?如何在角度 4 中使字符串保持不变？
【发布时间】：2017-05-11 13:11:19
【问题描述】：

在我的服务中，我使用的是http 帖子。我想将 URL 设置为常量。

return this.http.get(this.config.API_URL+'users', options).map(res=>res.json());

我尝试了一项服务：

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

@Injectable()
export class AppService {
  API_URL :String;

  constructor() {
    this.API_URL = 'some url';
  }
}

还有没有其他方法可以在 Angular4 中创建一个常量值？

【问题讨论】：

Define global constants in Angular 2的可能重复

标签： angular

【解决方案1】：

我不确定我是否理解你的问题，但如果你想创建常量，你可以在不同的类中进行并导入它。

常量.ts

export class Constants {
  public static get HOME_URL(): string { return "sample/url/"; };
}

sample.component.ts

   import { Constants } from "./constants";
    @Component({

    })
     export class SampleComponent {
      constructor() {
       let url = Constants.HOME_URL;
      }
    }

【讨论】：

这样怎么称呼？ const USER_AUTH_API_URL = '/api-url';

【解决方案2】：

如果你只需要这样的话，你可以使用 es6/typescript 模块简单地导出一个常量：

常量.ts：

export const API_URL: string = 'api/url';

并在需要的地方导入：

import { API_URL } from './constants.ts';

...

return this.http.get(API_URL+'users', options)
                .map(res=>res.json());

或者如果你有很多常量，你可以将它们全部导入：

import * as constants from './constants.ts';

...

return this.http.get(constants.API_URL+'users', options)
                    .map(res=>res.json());

如果您希望在启动时为每个应用程序配置常量，您可以使用提供程序。查看此链接中的最佳答案：how do I get angular2 dependency injection to work with value providers

【讨论】：

如果常量恰好是一个对象，你可以把它包裹在一个`Object.freeze({ ... })`中，让它成为一个真正的常量。

【解决方案3】：

将应用常量定义为 public static readonly 如下

public static readonly constName = 'Consts Value'

/app-constants.ts

export class Constants {

     public static readonly routeAuthRegister = '/auth/register';
     public static readonly routeAuthLogin = '/auth/login';
     public static readonly routeAuthRecovery = '/auth/forgot-password';

}

/api-constants.ts

最好将基本 URI 保存在环境文件中。并在 .angular-cli.json 中的应用程序中定义您的环境。我在这里附上下面的屏幕截图，用于定义自定义应用程序环境。

import { environment } from '../../environments/environment';

export class ApiURIs {

    public static readonly apiURL: string = environment.apiEndpoint;
    public static readonly apiV1: string = environment.apiEndpoint + '/v1';
    public static readonly apiV2: string = environment.apiEndpoint + '/v2';


    public static readonly login: string = ApiEndpoints.apiV1 + '/login';
    public static readonly register: string = ApiEndpoints.apiV1 + '/register';
    public static readonly signup: string = ApiEndpoints.apiV2 + '/register';

}

常量的使用

/core/auth.service.ts

import { ApiURIs } from './api-constants';

@Injectable()
export class AuthService {
    .....

    signUpUser(data) {
        return this.https.post(`${ApiURIs.signup}`, data);
    }

    .....
}

/auth/login.component.ts

export class LoginComponent implements OnInit {
   .....

   navigateToForgotPassowrd() {

        this.router.navigate([Constants.routeAuthRecovery]);
   }
   ......
}

为不同的环境定义不同的 API URI

【讨论】：