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的最佳方法是使用角度环境文件。使用它有两个好处：

适用于您的所有应用
您无需修改代码即可处理多个平台（localhost，dev，stating，prod）

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

environments.prod.ts
environments.ts
environement.test.ts

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

表示localhost：

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',
};

要在脚本中使用它，您只需要始终导入 import { environment } from './environments/environment'; //relative path from where your file is

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

这很酷，因为您可以在连续集成工具中轻松集成此命令行。

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

如果您需要课程，首先必须使用新关键字制作一个实例。

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/';

}

将一个typescript文件中的变量导入另一个

2 个答案: