在 Angular 应用中，我们经常需要定义一些全局变量或常量，用于存储应用的配置信息或公共的数据。本文将介绍如何在 Angular 应用中设置全局变量和常量，并提供相应的示例代码。
设置全局变量
在 Angular 应用中，可以使用全局变量来存储一些公共的数据或配置信息，比如全局的语言设置、主题设置等。设置全局变量的方法有很多种，下面我们将介绍两种比较常见的方法。
方式一：使用全局服务
可以创建一个全局服务，用于存储一些公共的数据或配置信息。这个服务可以在整个应用中被调用和使用。
首先，在 app.module.ts 中创建一个全局服务：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------------- ----------- ------ -- ------ ----- ------------- - -------- - -------- -- ------- ----- - -------- -- ------- -
上面的代码中，我们使用 @Injectable 装饰器来定义一个服务，并在 providedIn 选项中指定根注入器为 root，这样就可以在整个应用中使用这个服务。
接下来，在组件中使用这个服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
--------- -
-----
------ --------------------------
------- ---------------------------------------------- --------------
------- ------------- --------------------------------------------------
------- ------------- --------------------------------------------------
---------
------- --------------- --------
------ -----------------------
------- ------------------------------------------- -----------
------- ------------- -----------------------------------------------
------- ------------ ----------------------------------------------
---------
------- ------------ --------
------
--
--
------ ----- ------------ -
------------------ ------- -------------- --
-上面的代码中，我们通过依赖注入的方式，在组件中使用了 GlobalService，并在模版中使用了服务中的属性 language 和 theme。
当用户选择不同的语言或主题时，会触发下拉框的 change 事件。我们可以通过在组件中使用 global 对象来更新服务中的属性值，并实时显示在界面上。
方式二：使用 Window 对象
另一种设置全局变量的方法是使用 Window 对象。这个方法比较简单，只需要在 index.html 中添加一些 JavaScript 代码即可。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------- -----------
----- ---------
----- --------------- ---------------------------- -----------------
-------
------
---------------------
--------
------------------ - -
--------- --------
------ -------
--
---------
-------
-------上面的代码中，我们在 body 元素的底部添加了一个 script 标签，并定义了一个名为 myAppConfig 的全局变量对象。这个对象可以用于存储一些应用的配置信息或公共的数据。
在组件中使用这个全局变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-----
------ --------------------------
------- ------------------------------------------------ --------------
------- ------------- -------------------------------------------
------- ------------- -------------------------------------------
---------
------- -------- --------
------ -----------------------
------- --------------------------------------------- -----------
------- ------------- ----------------------------------------
------- ------------ ---------------------------------------
---------
------- ----- --------
------
--
--
------ ----- ------------ -
-------- - ---
----- - ---
------------- -
------------- - ----------------------------
---------- - -------------------------
-
-------------------------- ------- -
------------- - ---------
--------------------------- - ---------
-
-------------------- ------- -
---------- - ------
------------------------ - ------
-
-上面的代码中，我们在组件的构造函数中获取了全局对象 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 关键字将常量导出，以便在其他模块中进行引用。
接下来，在组件中使用这些常量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --- - - ---- --------------
------------
--------- -----------
--------- -
-----
------ - -- -- --------
------ - -- - --------
------
--
--
------ ----- ------------ --上面的代码中，我们在组件中使用了 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 环境变量的值。
接下来，在组件中使用这些环境变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------------
------------
--------- -----------
--------- -
-----
-------- ---- ---- -- ---------------------- --------
---------------- -- ---------------------- --------
------
--
--
------ ----- ------------ -
----------- - ------------
-上面的代码中，我们在组件中导入了 environment.ts 文件，并将其赋值给组件中的 environment 变量。这样，就可以在组件中使用定义在环境变量中的常量了。
总结
本文介绍了在 Angular 应用中设置全局变量和常量的两种常见方法，并且提供了相应的示例代码。使用这些方法可以方便地在应用中定义一些公共的数据或配置信息，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6531f0c97d4982a6eb403706