Angular中直接导入常量与依赖注入的区别及相关疑问

你的示例代码 #

variables.ts

import { InjectionToken } from "@angular/core";

export const API_URL = 'www.com.com.ar'
export const API_URL2 = new InjectionToken<string>('www.com.com.arAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'); 

app.component.ts

import { Component, Inject } from '@angular/core';
import { API_URL, API_URL2 } from './varToExporit/variables';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 providers: [
   {provide:API_URL2, useValue:'www.com.com.arASDASD'}
 ]
})
export class AppComponent {

 title = '';
 exportedVariable:string = '';
 exportedVariable2:string = ''; 

 constructor(@Inject(API_URL2) private apiURL2: string) {
   this.exportedVariable = API_URL;
   this.exportedVariable2 = apiURL2;
 }
}

为什么显示的值是www.com.com.arASDASD？ #

你创建InjectionToken时传入的字符串只是调试用的描述标签，不是这个token的实际值。Angular依赖注入系统中，token的实际值由providers配置决定：

• 当你在组件的providers数组里写{provide:API_URL2, useValue:'www.com.com.arASDASD'}，相当于给API_URL2这个token绑定了具体的注入值。
• 构造函数里通过@Inject(API_URL2)获取的，就是useValue指定的内容，和创建token时的字符串无关。

使用依赖注入（exportedVariable2）的优势对比直接导入常量（API_URL） #

• 灵活的环境配置：直接导入的常量是硬编码在源码里的，修改值必须改代码重新编译。而DI可以在不同环境（开发/生产/测试）的配置文件中指定不同的useValue，比如开发用测试API、生产用正式API，无需改动业务组件代码。
• 高可测试性：单元测试时，你可以轻松给API_URL2注入模拟值（比如一个测试用的假地址），不用修改组件的导入逻辑，彻底解耦组件和配置细节。直接导入的常量做不到这一点，测试时只能用真实值或者改源码。
• 层级化的作用域控制：Angular的DI有层级（组件级、模块级、根级），你可以在特定组件/模块的providers里单独配置API_URL2的值，只会影响当前层级及子层级的组件。而直接导入的常量是全局生效的，所有用到它的地方都会用同一个值。
• 支持动态计算值：DI不仅能注入静态值，还可以通过useFactory配置动态生成的值。比如根据当前用户的权限返回不同的API地址，直接导入常量无法实现这种动态逻辑。

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