如果您正在开发网站，您可能会在组件模板中编写大量文本：

像这样编写文本不会损坏或有错误，但对于长期运行的项目来说维护起来相当烦人。为了改进这一点，您可以创建一个包含特定功能的所有文本的文件，并通过导入正确的密钥在整个应用程序中重复使用它。

该文件可以是：

• 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 compilerOptions 以允许将 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;
  }

}

但是，这种方法的缺点是您对文本内容没有任何智能感知。

  

    {{ pageText.TITLE }}
    
    
{{ pageText.HELLO_WORLD }}
  

要解决此问题，您必须围绕整个 wording.json 文件或您在组件中使用的特定对象（“蝙蝠侠”）构建自定义类型或接口。

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

  

    {{ pageText.TITLE }}
    
{{ pageText.SERIES.THE_DARK_KNIGHT.TITLE }}
  

  

    

      
{{ movies.BATMAN_BEGINS.TITLE }}
      

        {{ movies.BATMAN_BEGINS.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      
{{ movies.THE_DARK_KNIGHT.TITLE }}
      

        {{ movies.THE_DARK_KNIGHT.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      

        {{ movies.THE_DARK_KNIGHT_RISES.TITLE }}
        

          {{ movies.THE_DARK_KNIGHT_RISES.DESCRIPTION }}
        
        {{ common.BUTTON }}
      
    
  

请注意，如果您的类组件通过构造函数注入依赖项，则构造函数必须包含“super”调用。

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    super(); // 



就像使用 JSON 一样，如果您需要更改标题或描述，您可以在一个地方 (wording.ts) 进行操作，而不是更改多个文件/组件。


  
  
  总结


本文演示了在 Angular 组件中使用措辞的两种方法。两种方法各有优缺点。

使用 TypeScript 文件可以加快速度并处理智能感知，但它可能不适合使用多种语言。

使用 JSON 文件需要一些额外的工作，但当在使用不同技术（支持 JSON 格式）构建的各种应用程序中使用精确翻译时，这是有益的。

如果您学到了新东西，请不要忘记点击关注按钮。另外，请在 Twitter 上关注我，以随时了解我即将发布的内容。

暂时再见 ？