Angular の抽象テキスト コンテンツ

Web サイトを開発している場合は、コンポーネント テンプレートに多くのテキストを記述する可能性があります。

このようにテキストを書くことは、壊れたりバグがあるわけではありませんが、長期にわたるプロジェクトの維持にはかなり面倒です。これを改善するには、特定の機能のすべてのテキストを含むファイルを作成し、正しいキーをインポートすることでアプリ全体でそれを再利用できます。

このファイルは次のとおりです:

• JSON ファイル
• TypeScript ファイル

両方のアプローチの長所と短所について説明します。

I) JSON 翻訳ファイル

(1) JSONファイルを作成する

プロジェクトのルート ディレクトリで、src/assets に移動し、新しいフォルダー (wording) と JSON ファイル (wording.json) を作成します。

? src 
|__ ? assets
|_____ ? wording
|_______ wording.json

翻訳を追加します:

{
  "APP": {
    "TITLE": "Movies App",
    "DESCRIPTION": "The best site for movies"
  },
  "COMMON": {
    "BUTTON": "Peek In"
  },
  "MOVIES": {
    "BATMAN": {
      "TITLE": "Batman",
      "SERIES": {
        "THE_DARK_KNIGHT": {
          "TITLE": "The Dark Knight Series",
          "MOVIES": {
            "BATMAN_BEGINS": {
              "TITLE": "Batman Begins",
              "DESCRIPTION": "Bruce learns the art of fighting to confront injustice."
            },
            "THE_DARK_KNIGHT": {
              "TITLE": "The Dark Knight",
              "DESCRIPTION": "Lorem Ipsum"
            },
            "THE_DARK_KNIGHT_RISES": {
              "TITLE": "The Dark Knight Rises",
              "DESCRIPTION": "Lorem Ipsum"
            }
          }
        }
      }

    }
  }
}

(2) TSConfigの更新

必要に応じて、resolveJsonModule: true を tsconfig.json コンパイラオプションに追加して、JSON ファイルを ECMAScript モジュールにインポートできるようにします。

{
  "compilerOptions": {
    "resolveJsonModule": true, // Add this line to tsconfig.json
  }
}

(3) JSONファイルを利用する

ファイルをコンポーネントに直接インポートします

// component file
import wording from '../../assets/wording/wording.json';

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  ngOnInit(): void {
    this.pageText = wording.MOVIES.BATMAN;
  }

}

または、すべての文言をグローバルにインポートするサービスを作成します:

// translations.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TranslationsService {

  public wording!: any;

  constructor(private http: HttpClient) {
    this.setTranslations();
  }

  private setTranslations() {
    this.http.get('./assets/wording/wording.json').subscribe(data => {
      this.wording = data;
     });
  }

}

そして、サービスをコンポーネントに挿入します。

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

  ngOnInit(): void {
    this.pageText = this.translationsService.wording.MOVIES.BATMAN;
  }

}

ただし、このアプローチの欠点は、テキスト コンテンツに対するインテリセンスがないことです。

  <div class="movie-main-container">
    <span class="heading0">{{ pageText.TITLE }}</span>
    <!-- ..............No complaints here ? -->
    <div class="heading4">{{ pageText.HELLO_WORLD }}</div>
  </div>

これを解決するには、wording.json ファイル全体またはコンポーネントで使用している特定のオブジェクト (「バットマン」) の周りにカスタム タイプまたはインターフェイスを構築する必要があります。

II) TypeScript 翻訳ファイル

これを行うもう 1 つの方法は、JSON ファイルを破棄して、代わりに Typescript ファイルを作成することです。

(1)

src/app 内の任意の場所に新しい wording.ts ファイルを作成します

// wording.ts
const WORDING = {
  APP: {
    TITLE: 'Movies App',
    DESCRIPTION: 'The best site for movies',
  },
  COMMON: {
    BUTTON: 'Peek In',
  },
  MOVIES: {
    BATMAN: {
      TITLE: 'Batman',
      SERIES: {
        THE_DARK_KNIGHT: {
          TITLE: 'The Dark Knight Series',
          MOVIES: {
            BATMAN_BEGINS: {
              TITLE: 'Batman Begins',
              DESCRIPTION:
                'Bruce learns the art of fighting to confront injustice.',
            },
            THE_DARK_KNIGHT: {
              TITLE: 'The Dark Knight',
              DESCRIPTION: 'Lorem Ipsum',
            },
            THE_DARK_KNIGHT_RISES: {
              TITLE: 'The Dark Knight Rises',
              DESCRIPTION: 'Lorem Ipsum',
            },
          },
        },
      },
    },
  },
};

export default WORDING;

(2) このファイルを読み込むクラスを作成します。

任意のコンポーネントに新しい wordings.ts ファイルをインポートできます。ただし、私はこのファイルから読み取るカスタム (UseWording) クラスを作成することを好みます。

// use-wording.ts

import WORDING from './wording';

/**
 * Wrapper for translation wording
 */
export default class UseWording {

  get useWording() {
    return WORDING
  }
}

(3) コンポーネント内の UseWording クラスを inerit します。

import { Component } from '@angular/core';
import UseWording from '../../../shared/translations/use-wording';

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN
}

これにより、テンプレート内のインテリセンスをすぐに確認できるようになります。

さらに、文言オブジェクト内の特定のキーを対象とするクラス プロパティをさらに作成できます。

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN;
  readonly movies = this.useWording.MOVIES.BATMAN.SERIES.THE_DARK_KNIGHT.MOVIES;
  readonly common = this.useWording.COMMON;
}

<div class="movie-main">
  <div class="movie-main-container">
    <span class="heading0">{{ pageText.TITLE }}</span>
    <div class="heading4">{{ pageText.SERIES.THE_DARK_KNIGHT.TITLE }}</div>
  </div>

  <div class="movie-main-cards">
    <div class="layout-centered">
      <div class="heading1">{{ movies.BATMAN_BEGINS.TITLE }}</div>
      <div class="heading4">
        {{ movies.BATMAN_BEGINS.DESCRIPTION }}
      </div>
      <button class="button-primary">{{ common.BUTTON }}</button>
    </div>
    <div class="layout-centered">
      <div class="heading1">{{ movies.THE_DARK_KNIGHT.TITLE }}</div>
      <div class="heading4">
        {{ movies.THE_DARK_KNIGHT.DESCRIPTION }}
      </div>
      <button class="button-primary">{{ common.BUTTON }}</button>
    </div>
    <div class="layout-centered">
      <div class="heading1">
        {{ movies.THE_DARK_KNIGHT_RISES.TITLE }}
        <div class="heading4">
          {{ movies.THE_DARK_KNIGHT_RISES.DESCRIPTION }}
        </div>
        <button class="button-primary">{{ common.BUTTON }}</button>
      </div>
    </div>
  </div>
</div>

クラス コンポーネントがコンストラクター経由で依存関係を挿入する場合、コンストラクターには「スーパー」呼び出しが含まれている必要があることに注意してください。

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    super(); // <-- this is mandatory
  }

JSON と同様に、タイトルや説明を変更する必要がある場合は、複数のファイル/コンポーネントを変更するのではなく、1 か所 (wording.ts) で変更します。

まとめ

この記事では、Angular コンポーネントで文言を使用する 2 つの方法を説明します。どちらの方法にも長所と短所があります。

TypeScript ファイルを使用すると処理が高速化され、インテリセンスが処理されますが、複数の言語を操作するのには適していない可能性があります。

JSON ファイルの使用には追加の作業が必要ですが、異なるテクノロジー (JSON 形式をサポートする) で構築されたさまざまなアプリ間で正確な翻訳が使用される場合には有益です。

何か新しいことを学んだ場合は、忘れずにフォローボタンを押してください。また、Twitter で私をフォローして、今後のコンテンツの最新情報を入手してください。

とりあえずさようなら?

以上がAngular の抽象テキスト コンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。