在Angular的HTML文件中是否可以访问environment环境变量？

Angular 模板的作用域仅限当前组件类的公开成员，无法直接引用组件外部导入的模块变量，你可以通过以下几种方式实现需求： #

方法1：组件内直接暴露environment变量（最简单，适合少量组件使用的场景） #

在对应组件的.ts文件中，将导入的environment声明为公共类属性即可：

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 声明为公共属性，模板就可以直接访问
  public environment = environment;

  ngOnInit(): void {
    const something = environment.someVariable;
  }
}

之后你的HTML模板里原来的写法就可以直接生效：

<img src="{{photoUrl.replace('upload/', 'upload/' + environment.someVariable)}}">

方法2：封装成通用管道（适合多组件复用、逻辑统一管理的场景） #

如果多个组件都需要用到环境变量拼接图片地址，可以把逻辑封装成管道，避免每个组件都重复导入environment：

1. 首先生成管道：
   ng generate pipe pipes/env-replace
2. 管道代码：

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

@Pipe({
  name: 'envPhotoUrl'
})
export class EnvPhotoUrlPipe implements PipeTransform {
  transform(photoUrl: string): string {
    return photoUrl.replace('upload/', 'upload/' + environment.someVariable);
  }
}

3. 模板中使用：

<img src="{{photoUrl | envPhotoUrl}}">

方法3：封装成环境变量服务（适合大量场景需要访问全量环境变量的场景） #

1. 生成服务：
   ng generate service services/env
2. 服务代码：

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class EnvService {
  public get config() {
    return environment;
  }
}

3. 组件中注入并暴露为公共属性：

import { Component } from '@angular/core';
import { EnvService } from 'src/app/services/env.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(public envService: EnvService) {}
}

4. 模板中使用：

<img src="{{photoUrl.replace('upload/', 'upload/' + envService.config.someVariable)}}">

内容的提问来源于stack exchange，提问作者chuckd