如何在 Angular 应用中设置全局变量和常量-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 应用中，我们经常需要定义一些全局变量或常量，用于存储应用的配置信息或公共的数据。本文将介绍如何在 Angular 应用中设置全局变量和常量，并提供相应的示例代码。

设置全局变量

在 Angular 应用中，可以使用全局变量来存储一些公共的数据或配置信息，比如全局的语言设置、主题设置等。设置全局变量的方法有很多种，下面我们将介绍两种比较常见的方法。

方式一：使用全局服务

可以创建一个全局服务，用于存储一些公共的数据或配置信息。这个服务可以在整个应用中被调用和使用。

首先，在 app.module.ts 中创建一个全局服务：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalService {
  language = 'zh-CN'; // 默认语言为中文
  theme = 'light'; // 默认主题为浅色
}

上面的代码中，我们使用 @Injectable 装饰器来定义一个服务，并在 providedIn 选项中指定根注入器为 root，这样就可以在整个应用中使用这个服务。

接下来，在组件中使用这个服务：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { GlobalService } from './global.service';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <label for="language">语言：</label>
      <select (change)="global.language=$event.target.value" id="language">
        <option value="zh-CN" [selected]="global.language==='zh-CN'">中文</option>
        <option value="en-US" [selected]="global.language==='en-US'">英文</option>
      </select>
      <div>{{ global.language }}</div>

      <label for="theme">主题：</label>
      <select (change)="global.theme=$event.target.value" id="theme">
        <option value="light" [selected]="global.theme==='light'">浅色</option>
        <option value="dark" [selected]="global.theme==='dark'">深色</option>
      </select>
      <div>{{ global.theme }}</div>
    </div>
  `,
})
export class AppComponent {
  constructor(public global: GlobalService) {}
}

上面的代码中，我们通过依赖注入的方式，在组件中使用了 GlobalService，并在模版中使用了服务中的属性 language 和 theme。

当用户选择不同的语言或主题时，会触发下拉框的 change 事件。我们可以通过在组件中使用 global 对象来更新服务中的属性值，并实时显示在界面上。

方式二：使用 Window 对象

另一种设置全局变量的方法是使用 Window 对象。这个方法比较简单，只需要在 index.html 中添加一些 JavaScript 代码即可。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-root></app-root>
    <script>
      window.myAppConfig = {
        language: 'zh-CN',
        theme: 'light'
      };
    </script>
  </body>
</html>

上面的代码中，我们在 body 元素的底部添加了一个 script 标签，并定义了一个名为 myAppConfig 的全局变量对象。这个对象可以用于存储一些应用的配置信息或公共的数据。

在组件中使用这个全局变量：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <label for="language">语言：</label>
      <select (change)="onLanguageChange($event.target.value)" id="language">
        <option value="zh-CN" [selected]="language==='zh-CN'">中文</option>
        <option value="en-US" [selected]="language==='en-US'">英文</option>
      </select>
      <div>{{ language }}</div>

      <label for="theme">主题：</label>
      <select (change)="onThemeChange($event.target.value)" id="theme">
        <option value="light" [selected]="theme==='light'">浅色</option>
        <option value="dark" [selected]="theme==='dark'">深色</option>
      </select>
      <div>{{ theme }}</div>
    </div>
  `,
})
export class AppComponent {
  language = '';
  theme = '';

  constructor() {
    this.language = window.myAppConfig.language;
    this.theme = window.myAppConfig.theme;
  }

  onLanguageChange(language: string) {
    this.language = language;
    window.myAppConfig.language = language;
  }

  onThemeChange(theme: string) {
    this.theme = theme;
    window.myAppConfig.theme = theme;
  }
}

上面的代码中，我们在组件的构造函数中获取了全局对象 myAppConfig 中的 language 和 theme 属性，并将它们赋值给组件中的 language 和 theme 变量。

当用户选择不同的语言或主题时，会触发下拉框的 change 事件。我们可以在事件处理函数中更新组件中的 language 或 theme 变量，并将新的值保存到全局对象 myAppConfig 中。

设置常量

在 Angular 应用中，我们也经常需要定义一些常量，用于存储一些固定的数据或配置信息。设置常量的方法也有很多种，下面我们将介绍两种比较常见的方法。

方式一：使用 TypeScript 中的 const

可以在 src 目录下创建一个名为 constants.ts 的文件，用于存储应用中的常量。在这个文件中可以使用 TypeScript 中的 const 关键字来定义常量。

export const pi = 3.1415926;
export const e = 2.71828;

上面的代码中，我们使用 export 关键字将常量导出，以便在其他模块中进行引用。

接下来，在组件中使用这些常量：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { pi, e } from './constants';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div>π = {{ pi }}</div>
      <div>e = {{ e }}</div>
    </div>
  `,
})
export class AppComponent {}

上面的代码中，我们在组件中使用了 constants.ts 文件中定义的常量 pi 和 e。

方式二：使用环境变量

另一种设置常量的方法是使用环境变量。可以在根目录下的 src/environments 目录中创建一个名为 environment.ts 的文件，用于存储应用中的环境变量。

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080',
};

上面的代码中，我们定义了两个环境变量，production 和 apiBaseUrl，并将它们导出。

在生产环境中，可以创建一个名为 environment.prod.ts 的文件，用于存储生产环境所需的环境变量。

export const environment = {
  production: true,
  apiBaseUrl: 'http://example.com/api',
};

上面的代码中，我们重新定义了 apiBaseUrl 环境变量的值。

接下来，在组件中使用这些环境变量：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div>API Base URL: {{ environment.apiBaseUrl }}</div>
      <div>Production: {{ environment.production }}</div>
    </div>
  `,
})
export class AppComponent {
  environment = environment;
}

上面的代码中，我们在组件中导入了 environment.ts 文件，并将其赋值给组件中的 environment 变量。这样，就可以在组件中使用定义在环境变量中的常量了。

总结

本文介绍了在 Angular 应用中设置全局变量和常量的两种常见方法，并且提供了相应的示例代码。使用这些方法可以方便地在应用中定义一些公共的数据或配置信息，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531f0c97d4982a6eb403706