Angular中如何更新@NgModule上方声明的变量？

能否从其他文件传递数据到configuration变量？ #

可以。这个变量属于模块级全局变量，只要正确导出并在其他文件中导入，就能传递数据并更新它。

如何更新这个外部变量？ #

有两种常见实现方式，适配不同场景：

方式1：直接导出并导入修改（简单直接） #

在AppModule所在文件中，将变量改为导出状态，允许外部文件导入并修改：

// app.module.ts
import { Inject, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 改为export let，开放外部访问权限
export let configuration = "";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

在其他文件（如服务、组件或工具类）中导入并更新：

// 示例：another-file.ts
import { configuration } from './app.module';

// 直接赋值更新变量
configuration = "新的配置内容";

方式2：用Angular服务管理配置（推荐的架构化做法） #

全局变量虽简单，但不符合Angular依赖注入的设计理念，不利于测试和维护。更推荐用服务封装配置逻辑：

1. 创建配置服务：

// config.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private _configuration = "";

  // 提供读取配置的方法
  get configuration(): string {
    return this._configuration;
  }

  // 提供更新配置的方法
  setConfiguration(newConfig: string): void {
    this._configuration = newConfig;
  }
}

2. 在AppModule中使用服务（若服务已声明providedIn: 'root'，可省略providers配置）：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigService } from './config.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  providers: [ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private configService: ConfigService) {
    // 可在此初始化或读取配置
    console.log(this.configService.configuration);
  }
}

3. 在其他文件中注入服务并更新配置：

// 示例：某个组件
import { Component } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-example',
  template: '<button (click)="updateConfig()">更新配置</button>'
})
export class ExampleComponent {
  constructor(private configService: ConfigService) {}

  updateConfig(): void {
    this.configService.setConfiguration("通过服务更新的配置");
  }
}

注意事项 #

• 方式1的全局变量需注意加载顺序：若其他文件在AppModule初始化前修改变量，修改后的值会被AppModule使用；运行时动态修改的话，所有引用该变量的地方都会同步更新。
• 方式2的服务为单例模式（providedIn: 'root'），整个应用仅一个实例，能保证配置一致性，也更易开展单元测试。

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