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

Question

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

这里我需要根据环境更改站点标志。

标志是从api返回的。取决于 env 如何运行 api。以及如何在组件中使用它。

我通过

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

环境.dev

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

环境测试

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

现在logo url是从api返回的

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

在哪里运行这个 api。如果是这样，如何配置此 api 对 env 文件的响应。

请帮我做这件事。

Answer 1

您只需要在 typescript 中获取对该环境变量的引用并使用绑定来更新 HTML 中的徽标源。

打字稿：

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

logoUrl: string;

constructor{
    this.logoUrl= environment.logourl;
}

您现在可以像这样将 logo url 绑定到 HTML 图像：

<img [src]="logourl" />

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

当您生成一个新项目时，Angular 会为您提供 environment.ts 用于开发，environment.prod.ts 用于生产。

默认情况下，您会在所有组件中导入 environment，当您构建项目以进行生产时，Angular 会将引用交换到生产。