我在模块中使用angular-cli的环境变量。 当我在另一个项目中导入我的模块时,是否可以在编译和运行时使用我的项目的环境变量?
我的模块
myModule/
src/
/app
my.service.ts
/environments
environment.prod.ts
environment.ts
app.module.ts
etc.
我的模块是my.service.ts
import { environment } from './environments/environment';
@Injectable()
export class MyService {
private title = environment.title;
showTitle(): string {
return this.title;
}
etc.
}
我的模块的环境。
export const environment = {
production: false,
title: 'My Module in dev mode'
}
我的模块的environment.prod.ts
export const environment = {
production: true,
title: 'My Module in prod mode'
}
我的项目
myProject/
src/
/app
app.component.ts
/environments
environment.prod.ts
environment.ts
app.module.ts
etc.
我的项目的AppComponent
Component({
selector: 'app-root',
template: `<h1>{{title}}</h1>`
})
export class AppComponent {
title: string;
constructor(myService: MyService) {
this.title = myService.showTitle();
}
}
我的项目环境。
export const environment = {
production: false,
title: 'My Project in dev mode'
}
我的项目的environment.prod.ts
export const environment = {
production: true,
title: 'My Project in prod mode'
}
目前,当我运行我的项目时,我看到我的模块处于开发模式,但我希望在开发模式下看到我的项目。
有没有办法从environment.ts
&#39;等相对网址导入 import { environment } from '/src/my-app/environments/environment
? ?
答案 0 :(得分:5)
根据我的理解,你是一个项目:&#39; MyProject&#39;和一个外部模块&#39; MyModule&#39;并且您想导入&#39; MyProject&#39; &#39; MyModule&#39;中的环境变量service&#39; MyService&#39;。
恕我直言,从设计的角度来看,如果您将环境变量作为参数传递给“我的服务”,那就更好了。你打算用它的地方。
但是,如果您坚持导入它,要导入两个环境变量,请在my.service.ts
试试这个:
import { myModuleEnvironment } from './environments/environment';
import { myProjectEnvironment } from '../../../src/app/environments/environment
考虑您的项目文件夹结构:
myProject/
myModule/
src/
/app
my.service.ts
/environments
environment.prod.ts
environment.ts
app.module.ts
src/
/app
app.component.ts
/environments
environment.prod.ts
environment.ts
app.module.ts
etc.
更多澄清:
TypeScript 导入规则与nodeJS具有相同的约定。如果导入以点开头:
import {library} from './some/library/path';
然后将其视为声明导入的文件的相对路径。但是,如果它是绝对路径(例如,导入angular2组件):
import {Component} from '@angular/core';
因此,Typescript认为这是一个外部模块,它上升到文件树,直到找到package.json
文件。
然后进入node_modules
文件夹,找到与导入名称相同的文件夹(在上面的示例中为@angular/core
)。
然后在模块的package.json中查找主.d.ts或.ts文件,然后加载它,或者查找与指定文件同名的文件或index.d.ts或index.ts文件。
答案 1 :(得分:3)
我认为这是不可能的,因为导入的文件的范围限定为导入它的文件,因此除非将其分配给暴露给外部组件的类变量,否则无法从外部访问此文件和数据。 / p>
我的建议是:
在需要它的每个文件中导入env文件,这样做没有问题。三次摇晃将消除重复。
在导入此env文件的模型中创建服务,将数据分配给变量并通过服务公开该变量。因此,当您在另一个模型中加载模型时,您还可以加载服务并访问公开的env变量。
类似的东西:
import { environment } from './environments/environment';
@Injectable()
export class MyService {
environmentData = environment; // HERE YOU EXPOSE THE DATA THROUGH THIS SERVICE
private title = environment.title;
showTitle(): string {
return this.title;
}
etc.
}
然后,您可以在任何需要env数据的地方使用此服务。