如果您正在开发网站,您可能会在组件模板中编写大量文本:
像这样编写文本不会损坏或有错误,但对于长期运行的项目来说维护起来相当烦人。为了改进这一点,您可以创建一个包含特定功能的所有文本的文件,并通过导入正确的密钥在整个应用程序中重复使用它。
此文件可以是:
我将描述这两种方法的优缺点。
在项目的根目录中,转到 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" } } } } } } }
如果需要,请将resolveJsonModule: true 添加到 tsconfig.json compilerOptions 以允许将 JSON 文件导入 ECMAScript 模块:
{ "compilerOptions": { "resolveJsonModule": true, // Add this line to tsconfig.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 文件或您在组件中使用的特定对象(“蝙蝠侠”)构建自定义类型或接口。
另一种方法是放弃 JSON 文件并创建 Typescript 文件。
在 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;
您可以在任何所需的组件中导入新的 wordings.ts 文件。但是,我喜欢创建一个从此文件读取的自定义 (UseWording) 类。
// use-wording.ts import WORDING from './wording'; /** * Wrapper for translation wording */ export default class UseWording { get useWording() { return WORDING } }
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 文件可以加快速度并处理智能感知,但它可能不适合使用多种语言。
使用 JSON 文件需要一些额外的工作,但当在使用不同技术(支持 JSON 格式)构建的各种应用程序中使用精确翻译时,这是有益的。
如果您学到了新东西,请不要忘记点击关注按钮。另外,请在 Twitter 上关注我,以随时了解我即将发布的内容。
现在再见?
以上是Angular 中的抽象文本内容的详细内容。更多信息请关注PHP中文网其他相关文章!