Angular의 추상 텍스트 콘텐츠

웹사이트를 개발하는 경우 구성 요소 템플릿에 많은 텍스트를 작성할 가능성이 높습니다.

이와 같은 텍스트 작성은 깨지거나 버그가 있는 것이 아니라 장기 실행 프로젝트를 유지하기에는 오히려 지루한 일입니다. 이를 개선하려면 특정 기능에 대한 모든 텍스트가 포함된 파일을 생성하고 올바른 키를 가져와 앱 전체에서 재사용할 수 있습니다.

이 파일은 다음과 같습니다.

• JSON 파일
• 타입스크립트 파일

두 접근 방식의 장단점을 설명하겠습니다.

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 업데이트

필요한 경우 JSON 파일을 ECMAScript 모듈로 가져올 수 있도록 tsconfig.json 컴파일러 옵션에 JSONModule: true를 추가하세요.

{
  "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 파일이나 구성 요소에서 사용 중인 특정 개체("Batman") 주위에 사용자 정의 유형이나 인터페이스를 구축해야 합니다.

II) TypeScript 번역 파일

이를 수행하는 또 다른 방법은 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 클래스를 초기화합니다.

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>

클래스 구성 요소가 생성자를 통해 종속성을 주입하는 경우 생성자에는 'super' 호출이 포함되어야 합니다.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

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

JSON과 마찬가지로 제목이나 설명을 변경해야 하는 경우 여러 파일/구성 요소를 변경하는 대신 한 곳(wording.ts)에서 변경하면 됩니다.

마무리

이 기사에서는 Angular 구성 요소에서 문구를 사용하는 두 가지 방법을 보여줍니다. 두 가지 방법 모두 장점과 단점이 있습니다.

TypeScript 파일을 사용하면 속도가 빨라지고 Intellisense가 처리되지만 여러 언어로 작업하는 데는 적합하지 않을 수 있습니다.

JSON 파일을 사용하려면 몇 가지 추가 작업이 필요하지만 (JSON 형식을 지원하는) 다양한 기술로 구축된 다양한 앱에서 정확한 번역을 사용할 때 유용합니다.

새로운 내용을 배웠다면 팔로우 버튼을 누르는 것을 잊지 마세요. 또한 Twitter에서 저를 팔로우하시면 제가 앞으로 올릴 콘텐츠에 대한 최신 소식을 받아보실 수 있습니다.

이제 안녕 ?

위 내용은 Angular의 추상 텍스트 콘텐츠의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!