Angular6根据构建配置更改站点日志

Question

我的angular 6 Web应用程序中有2个环境设置。

在这里，我需要根据环境更改站点徽标。

徽标从api返回。取决于环境如何运行api。以及如何在组件中使用它。

我通过

与env config实现了静态徽标集成

environment.dev

     production: true,
  logourl: 'assets/images/logo.png',

environment.test

     production: true,
  logourl: 'assets/images/logo1.png',

现在徽标网址从api返回为

Dev: http://url.com/getlog?cliid=1
test: http://url.com/getlog?cliid=2

在何处运行此api。如果是这样，如何配置此api响应到env文件。

请帮助我做到这一点。

Answer 1

您只需要在打字稿中引用该环境变量，并使用绑定来更新HTML中的徽标来源。

打字稿：

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

logoUrl: string;

constructor{
    this.logoUrl= environment.logourl;
}

您现在可以将徽标网址绑定到HTML图像，如下所示：

<img [src]="logourl" />

根据项目设置，当在产品中运行Angular时，应将导入替换为相应的环境文件。

当您生成新项目时，Angular会为您提供environment.ts进行开发，为您提供environment.prod.ts进行生产。

默认情况下，您会在所有组件中导入environment，并且在构建生产项目时，Angular会交换对生产的引用。