2016-05-13 76 views
22

我想在构建Angular2(typescript)应用程序时将自定义参数传递给angular-cli。这可能吗?我如何在我的代码中访问这些参数?我可以在构建时将角度参数传递给角度cli

这种情况是这样的:我有一个Angular2应用程序与2布局。每个布局有3种颜色(红色,蓝色,绿色)。我想建立所有可能的组合。每个布局和颜色一个应用程序=> layout1red,layout1green,layout2blue,...

我想为每个构建创建6个JSON配置文件,我定义了布局和颜色以及其他一些属性。

+0

阅读我的答案,并给我一些关于何时以及如何使用这些配置的信息?它在你的模板中。 ?是否想要创建单独的模板?或者是什么 ? 给我们一些澄清,我会解决你的问题 – Milad

回答

7

可以使用@angular/cli创建多个配置文件。

正如docs自定义配置文件中提到可以通过以下方式添加:

  • 创建src/environments/environment.NAME.ts
  • .angular-cli.json
  • 添加{ "NAME": 'src/environments/environment.NAME.ts' }apps[0].environments对象通过在该--env=NAME标志使用它们构建/提供命令。

所以,你可能需要6个配置文件的dev和6个配置文件prod。

然后访问这些变量只需从environment.ts文件导入环境对象。

3

我没有完全得到你的问题,我能想到的实现这一点的方法有两种:

A-传递参数生成一个新项目时:

1为了能够将角度参数传递给角色cli,你需要明白你想要在哪里使用它。

如果在布局中使用这些配置,则可以分叉Angular cli并更新其蓝图并轻松添加自己的配置。

这里是组件蓝图:

 angular-cli/packages/@angular/cli/blueprints/component/files/__path__/__name__.component.ts 

,看起来像这样:

@Component({ 
    selector: '<%= selector %>',<% if(inlineTemplate) { %> 
    template: ` 

你看到selector?这就是你可以使用的组件名称,最后当你创建一个新项目时,你可以在那里传递你自己的标志并使用它。

但是这并不是最好的想法,因为当Angular cli得到更新时,你总是遇到麻烦。

2-其他可能的解决方案是使用ng eject

这将在一个单独的文件中webpack配置,并把它在你的项目的根文件夹,然后可以与该文件播放,并提供您的配置,并它根据您的应用定制。

但是,我不知道你想如何使用该配置。

这是您的build time配置的理想选择。

3-使用environments配置:

因为它已经回答了,这也是很方便的提供build time配置:

关注@mikedanylov的答案,然后在你的文件使用它像这样:

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

if(environment.colorRed==='blue'){ 

    console.log('the color is blue'); 

} 


npm build -e=colorRed 

B:Run time

这是一个更好的选择,你可以像这样创建您的index.html一个电话:

<script scr="wherever/configurations/blue"></script> 

,然后里面的配置,你可能有:

var configuration = { 
     whatEver:"blue" 
    } 

因为这是一个脚本,它随处可用,您可以在组件中访问它:

export class MyComponent{ 


    ngOnInit(){ 
     console.log('colour is : '+window['configuration.whatEver']); // obviously you can improve this and create type definitions and what not. 
    } 
} 

这会给您更多的灵活性在未来更新您的配置时无需再次构建您的应用程序。

很明显,您可以通过Ajax调用进行相同的调用,但是我发现上述内容更偏向应用程序。