Angular 将变量从一个typescript文件导入另一个typescript文件

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

我要导入的变量是

citylistrl

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

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

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

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

my pycharm编辑器中的

CitySturl

当前为红色。带着信息

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

---

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

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

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

并以这种方式导入它们

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从'app/backendUrls'导入{citylistrl}；
@可注射（）
出口级cityGetService{
构造函数（私有http:http）{}
城市网（）{
this.http.get（CitySturl）
}
}

如果需要将它们全部放在一个对象中，也可以这样导出它们

export const rooturl='0http://127.0.0.1:8000';
export const citylistrl=rooturl+'/api/city/'
导出常量全部={
rooturl，citylsturl
}

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

为类生成的代码如下所示

define（[“require”，“exports”]，函数（require，exports）{
“严格使用”；
defineProperty（导出，“\uu esModule”{value:true}）；
var backendUrls=（函数（）{
函数backendUrls（）{
//根url
此.rooturl='0http://127.0.0.1:8000';
//获取所有城市的列表
this.citylsturl=this.rooturl+'/api/city/'；
}
返回后端URL；
}());
exports.backendUrls=backendUrls；
});

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

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从“app/backendUrls”导入{backendUrls}；
@可注射（）
出口级cityGetService{
构造函数（私有http:http）{}
城市网（）{
this.http.get（新的backendUrls（）.citySturl）
}
}

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

导出类后端URL{
//根url
静态rooturl:string='1〕http://127.0.0.1:8000';
//需要使用类来访问根，因为我们没有实例。
静态citylistrl:string=backendUrls.rooturl+'/api/city/'；
}
处理服务器api URL的最佳方法是使用angular环境文件。
使用它有两个优点：


适用于所有应用程序
您可以在不修改代码的情况下处理多个平台（localhost、dev、stating、prod）

在
app/environments
中，您可以创建不同的文件：


environments.prod.ts
环境技术
环境测试

在每个文件中定义gobals变量：

对于本地主机：

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

对于prod示例：

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

要在脚本中使用它，只需始终导入
从“/environments/environment”导入{environment}//文件所在位置的相对路径

import { environment } from './environments/environment'
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

这很酷，因为您可以轻松地将此命令行集成到连续集成工具中。
有趣的是；在每个变量的末尾，现在都会出现红色的警告，这是怎么回事？我在cityGetService.ts文件中没有更多的错误，这意味着您的解决方案成功了，谢谢。这是愚蠢的，我在上面评论的问题。我想这只是无缘无故的抱怨。我会接受你的回答并感谢你哦，你的更新是的，谢谢你实际上第一个解决方案并没有真正起作用，因为this.rootUrl没有定义，因为它没有指向backendUrl。cityurl最终会变成“undefined/api/city/”该死的好吧，带我看看SenseDoes，这意味着我可以摆脱export-const后端URL吗？在这个文件中，我唯一需要的就是两个变量和它们的导出？