asp.net core <environment> 等效于angular2？

Question

在 asp.net 核心中，我可以使用<environment> 标签有条件地在我的布局 html 页面中包含 css/js：

<environment names="Development,Staging">
    <script type="text/javascript" href="js/debug.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</environment>

<environment names="Production">
    <link rel="stylesheet" type="text/css" href="css/style.min.css" />
</environment>

如何在 Angular 2 中实现这一点？我所说的 css/js 文件是站点范围的，而不是特定于组件的

（PS。我是 Angular 2 的新手）

Answer 1

如果您使用的是 angular2 CLI，那么您可以使用 enironment.ts。 此文件中指定的属性将在整个应用程序中可用。

你可以像这样创建多个环境-

在组件中导入这样的默认环境文件-

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

像这样从平台浏览器导入文档-

import { DOCUMENT } from '@angular/platform-browser';

注入组件（例如主AppComponent），

constructor (@Inject(DOCUMENT) private document) { }

使用环境条件并像这样应用动态样式表-

if(environment.EnvName === 'prod') {
        this.document.getElementById('theme').setAttribute('href', 'prod.css');
}
else {
        this.document.getElementById('theme').setAttribute('href', 'dev.css');
}

Angular CLI 负责在构建过程中为每个环境使用哪个文件。

这是您可以一次指定环境的方式-

ng build --env=prod

希望这对您的用例有所帮助。