Angular 8中如何在其他组件模板中使用AppComponent静态变量？

问题原因 #

Angular模板的上下文是当前组件的实例，不能直接引用类的静态属性，所以你直接在模板里写AppComponent.SOME_SERVICE_API会提示未定义——哪怕已经导入了AppComponent类，模板也找不到这个类的全局引用。

方案一：在当前组件中转存静态变量 #

1. 在你使用该模板的组件（比如子组件）里，导入AppComponent后，定义一个实例属性指向那个静态变量：

import { AppComponent } from 'src/app/app.component';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourTargetComponent {
  // 将静态变量转为当前组件的实例属性，供模板访问
  someServiceApi = AppComponent.SOME_SERVICE_API;
}

2. 模板里直接用这个实例属性拼接路径：

<img [src]="someServiceApi + '/files/' + some.id + '/folder/' + myFileName">

方案二：用环境配置文件管理API地址（更推荐） #

Angular自带环境配置机制，用来统一管理不同环境下的变量，比放在组件静态变量里更规范：

1. 打开src/environments/environment.ts，添加API地址：

export const environment = {
  production: false,
  someServiceApi: 'http://localhost:9050/api'
};

2. 在目标组件里导入环境变量，定义实例属性：

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

@Component({
  // 你的组件元数据
})
export class YourTargetComponent {
  someServiceApi = environment.someServiceApi;
}

3. 模板写法和方案一一致：

<img [src]="someServiceApi + '/files/' + some.id + '/folder/' + myFileName">

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