将变量从一个打字稿文件导入另一个

Question

我正在尝试将变量从一个类型脚本文件导入到另一个类型脚本文件中。

我要导入的变量是

cityListUrl

它所在的类型脚本文件的编码如下：

export class backendUrls{

  // root url
  rooturl:string= 'http://127.0.0.1:8000';

//get a list of all cities
  cityListUrl:string = this.rooturl + '/api/city/';


}

我想要将其导入的文件如下所示：

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

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(backendUrls.cityListUrl)
  }
}

我的 pycharm 编辑器中的

cityListUrl

目前是红色的。与消息

TS2339: 'cityListUrl' does not exist on type 'typeof backendUrls'.

以前有人遇到过这个问题吗？我该如何解决这个问题？谢谢你

Answer 1

处理服务器 api url 的最佳方法是使用 Angular 环境文件。 它的使用有两个主要优点：

• 它适用于您的所有应用程序
• 您可以处理多个平台（localhost、dev、statement、prod）而无需修改代码

在

app/environments

中您可以创建不同的文件，例如：

• 环境.prod.ts
• 环境.ts
• 环境.测试.ts

在每个文件中定义全局变量：

对于本地主机，将代码更改为：

export const environment = {
  production: false,
  apiHost: 'http://localhost',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.localhost',
};

对于产品示例，请改为：

export const environment = {
  production: true,
  apiHost: 'http://prod',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.prod',
};

要在脚本中使用它，您只需导入：

import { environment } from './environments/environment' //relative path from where your file is
export class Service {
    protected cityListUrl = '/api/city/';

    constructor(protected http: Http) { }

    get() {
      this.http.get(environment.apiHost + this.cityListUrl).map(response => response.json());
    }
}

当您使用 angular-cli 构建项目时，您必须指定要使用的环境。例如，您可以执行任一

ng build --environment=prod

或

ng serve --environment=test

这很酷，因为您可以轻松地将这个命令行集成到持续集成工具中。

Answer 2

最简单的方法是独立定义和导出每个变量。这样您也可以独立导入它们。

export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

并以这种方式导入它们。

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

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(cityListUrl)
  }
}

如果您需要将它们全部放在一个对象中，也只需将它们导出即可。

export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

export const all = {
    rooturl, cityListUrl
}

现在它是一个类，必须实例化才能访问它的实例属性。

为您的类生成的代码如下所示。

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var backendUrls = (function () {
        function backendUrls() {
            // root url
            this.rooturl = 'http://127.0.0.1:8000';
            //get a list of all cities
            this.cityListUrl = this.rooturl + '/api/city/';
        }
        return backendUrls;
    }());
    exports.backendUrls = backendUrls;
});

如果您需要一个类，您首先必须使用 new 关键字创建它的实例。

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

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(new backendUrls().cityListUrl)
  }
}

如果您需要使用一个类，但希望以静态方式使用它，您可以将属性设置为静态，然后它们将被定义为类本身的属性而不是实例。

export class backendUrls {
    // root url
    static rooturl: string = 'http://127.0.0.1:8000';

    // need to use the class to access the root since we don't have an instance.
    static cityListUrl: string = backendUrls.rooturl + '/api/city/';

}