如何在Angular应用的所有组件中动态切换静态URL

Angular自带环境配置机制，完全可以实现类似Django的静态URL全局动态切换，具体步骤如下：

1. 配置环境文件 #

Angular项目默认在src/environments目录下有两个环境文件：

• environment.ts：对应开发环境（ng serve命令）
• environment.prod.ts：对应生产环境（ng build --prod命令）

分别在两个文件中添加staticUrl字段：

// src/environments/environment.ts
export const environment = {
  production: false,
  staticUrl: '/assets/'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  staticUrl: 'https://s3_bucket_url/assets/'
};

如果需要测试等其他环境，可新增对应的environment.test.ts文件，并在angular.json的configurations节点中配置对应构建目标。

2. 创建全局静态资源服务（推荐） #

创建统一服务处理静态资源路径，避免组件内重复拼接逻辑：

ng generate service services/static-asset

在服务中注入环境配置，提供路径拼接方法：

// src/app/services/static-asset.service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class StaticAssetService {
  getAssetUrl(filename: string): string {
    return `${environment.staticUrl}${filename}`;
  }
}

3. 创建自定义管道（模板便捷调用） #

如果想在模板中像Django的{% static %}标签一样直接使用，可创建自定义管道：

ng generate pipe pipes/static-url

实现管道逻辑：

// src/app/pipes/static-url.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { environment } from '../../environments/environment';

@Pipe({
  name: 'staticUrl'
})
export class StaticUrlPipe implements PipeTransform {
  transform(filename: string): string {
    return `${environment.staticUrl}${filename}`;
  }
}

4. 在组件中使用 #

方式一：通过服务在组件类中获取路径 #

// src/app/example/example.component.ts
import { Component } from '@angular/core';
import { StaticAssetService } from '../services/static-asset.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  logoUrl: string;

  constructor(private staticAssetService: StaticAssetService) {
    this.logoUrl = this.staticAssetService.getAssetUrl('logo.png');
  }
}

模板中直接使用变量：

<img [src]="logoUrl" alt="Logo">

方式二：通过管道在模板中直接调用 #

模板中直接使用管道拼接路径：

<img [src]="'logo.png' | staticUrl" alt="Logo">

效果验证 #

• 执行ng serve时，图片路径自动生成为/assets/logo.png
• 执行ng build --prod时，图片路径自动生成为https://s3_bucket_url/assets/logo.png

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