Question

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

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

<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

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

2 个答案: