Angular 2 グローバル定数

1. Angular 2 グローバル定数を宣言する
2. グローバル定数の利点

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. コンパイラがそれらをキャッチするので、開発者はタイプミスやバグについて心配する必要はありません。

ここをクリック して、上記のコード例を実行します。