迹忆客 专注技术分享

Angular 2 框架有很多常量，供框架中的不同组件使用。 可以使用 angular2 模块访问这些常量，该模块位于项目目录的根目录下。

为了节省我们的时间，我们从全局常量中获得帮助。 Angular 2 全局常量在全局命名空间中存储一个值。

它们提供了一种方法来跟踪应用程序所有部分所需的数据。 当我们需要从应用程序的不同部分访问相同的值时，这很有用。

声明 Angular 2 全局常量

Angular 2 提供了一种声明全局常量的机制。 全局常量使用 const 关键字声明，可以在应用程序的任何位置访问。

它涉及以下步骤。

1. 通过向其添加 .ts 扩展名来创建常量文件。
2. 写出文件中的常量值，并使用 export default const 关键字将其导出为全局变量。
3. 使用 import 关键字后跟常量文件的路径，将此文件导入到您的应用程序模块中。

代码示例：

const MY_CONSTANT = 'This is my constant';

// Use MY_CONSTANT in the rest of your app like this:

console.log(MY_CONSTANT);

让我们讨论一个 Angular 2 全局常量的完整示例，以更好地理解它是如何工作的。

TypeScript代码：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   readonly CONSTANTS = CONSTANTS;
  global: { name: string; };
  constructor() {
    this.global = { name: 'demo' }
  }
}
export const CONSTANTS = {
  'globalName': 'demo'
}

Html 代码:

<h1>Example of Angular 2 Global Constants</h1>
<span *ngIf="global.name === CONSTANTS.globalName ">
    Hello World
</span>

全局常量的好处

Angular 2 使用全局常量使开发人员更容易处理数字。 在 Angular 2 中，全局常量被用作代码中硬编码值的替代方法。

在 Angular 2 中使用全局常量的好处如下。

1. 开发人员可以更轻松地处理数字。
2. 可以在不更改代码的情况下更改这些值。
3. 开发人员可以快速进行更改。
4. 开发人员不必担心拼写错误或错误，因为编译器会捕获它们。