Abstrakter Textinhalt in Angular

Wenn Sie Websites entwickeln, schreiben Sie wahrscheinlich viel Text in die Komponentenvorlagen:

Das Schreiben von Texten wie diesem ist nicht kaputt oder fehlerhaft, sondern bei lang laufenden Projekten eher mühsam in der Pflege. Um dies zu verbessern, können Sie eine Datei erstellen, die den gesamten Text für eine bestimmte Funktion enthält, und diese in der gesamten App wiederverwenden, indem Sie die richtigen Schlüssel importieren.

Diese Datei kann sein:

• JSON-Datei
• TypeScript-Datei

Ich beschreibe die Vor- und Nachteile beider Ansätze.

I) JSON-Übersetzungsdatei

(1) Erstellen Sie eine JSON-Datei

Gehen Sie im Stammverzeichnis Ihres Projekts zu src/assets und erstellen Sie einen neuen Ordner (wording) und eine JSON-Datei (wording.json):

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

Und fügen Sie Ihre Übersetzungen hinzu:

{
  "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 aktualisieren

Fügen Sie bei Bedarf „resolveJsonModule: true“ zu „tsconfig.json CompilerOptions“ hinzu, um den Import von JSON-Dateien in ECMAScript-Module zu ermöglichen:

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

(3) Verwenden Sie die JSON-Datei

Importieren Sie die Datei direkt in die Komponente

// 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;
  }

}

Oder erstellen Sie einen Dienst, der alle Formulierungen global importiert:

// 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;
     });
  }

}

Und dann injizieren Sie den Dienst in Ihre Komponente.

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

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

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

}

Der Nachteil dieses Ansatzes besteht jedoch darin, dass Sie kein intelligentes Gespür für den Textinhalt haben.

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

Um dieses Problem zu beheben, müssen Sie einen benutzerdefinierten Typ oder eine Schnittstelle um die gesamte Datei „wording.json“ oder das bestimmte Objekt („Batman“), das Sie in der Komponente verwenden, erstellen.

II) TypeScript-Übersetzungsdatei

Eine andere Möglichkeit, dies zu tun, besteht darin, die JSON-Datei wegzulassen und stattdessen eine Typescript-Datei zu erstellen.

(1)

Erstellen Sie irgendwo in src/app eine neue Datei „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) Erstellen Sie eine Klasse, die aus dieser Datei liest

Sie können eine neue Datei „wordings.ts“ in jede gewünschte Komponente importieren. Ich erstelle jedoch gerne eine benutzerdefinierte Klasse (UseWording), die aus dieser Datei liest.

// use-wording.ts

import WORDING from './wording';

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

  get useWording() {
    return WORDING
  }
}

(3) Ineritieren Sie die UseWording-Klasse in Ihren Komponenten

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

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

Damit können Sie sofort den Intellisense in der Vorlage sehen.

Darüber hinaus können Sie weitere Klasseneigenschaften erstellen, die auf bestimmte Schlüssel im Wortlautobjekt abzielen:

@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>

Beachten Sie, dass, wenn Ihre Klassenkomponente Abhängigkeiten über den Konstruktor einfügt, der Konstruktor einen „Super“-Aufruf enthalten muss.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

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

Und genau wie bei JSON können Sie, wenn Sie einen Titel oder eine Beschreibung ändern müssen, dies an einer Stelle tun (wording.ts), anstatt mehrere Dateien/Komponenten zu ändern.

Einpacken

Dieser Artikel zeigt zwei Möglichkeiten zur Verwendung von Formulierungen in Angular-Komponenten. Beide Methoden haben Vor- und Nachteile.

Die Verwendung der TypeScript-Datei beschleunigt die Arbeit und kümmert sich um die Intelligenz, ist jedoch möglicherweise nicht für die Arbeit mit mehreren Sprachen geeignet.

Die Verwendung der JSON-Datei erfordert einige zusätzliche Arbeit, ist jedoch von Vorteil, wenn die genauen Übersetzungen in verschiedenen Apps verwendet werden, die mit unterschiedlichen Technologien erstellt wurden (die das JSON-Format unterstützen).

Wenn Sie etwas Neues gelernt haben, vergessen Sie nicht, auf die Schaltfläche „Folgen“ zu klicken. Folgen Sie mir auch auf Twitter, um über meine kommenden Inhalte auf dem Laufenden zu bleiben.

Auf Wiedersehen?

Das obige ist der detaillierte Inhalt vonAbstrakter Textinhalt in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!