在模板文件中使用环境变量

Question

是否可以在模板文件中使用env变量？

我目前正在尝试使用以下语法：

<img class="preview-image" src="{{environment.assets + item.image}}" />

导致以下错误：

未定义标识符“环境”。组件声明，模板变量声明和元素引用不包含此类成员

我尝试将其导入我的component.ts文件中，import { environment } from './../../../../environments/environment';但没有任何改变。

Answer 1

只需environment在控制器中使用值定义公共变量，即可在模板中访问它：

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

export class AppComponent {

  environment = environment;

}

Answer 2

我最近想做同样的事情，我想出了一个管道解决方案，它适用于每个模板，而无需更改其 .ts 文件：

import {Pipe, PipeTransform} from '@angular/core';
import {environment} from '../../environments/environment';

@Pipe({name: 'env'})
export class EnvPipe implements PipeTransform {
  transform(variable: string): any {
    return environment[variable];
  }
}

然后，在您的 HTML 中，只需使用：

<span>{{'variableName' | env}}</span>

在你的情况下：

<img class="preview-image" src="{{'assets' | env}}{{item.image}}" />

确保将管道组件添加到您的 app.module.ts