如果您正在开发网站，您可能会在组件模板中编写大量文本：
像这样编写文本不会损坏或有错误，但对于长期运行的项目来说维护起来相当烦人。为了改进这一点，您可以创建一个包含特定功能的所有文本的文件，并通过导入正确的密钥在整个应用程序中重复使用它。
此文件可以是：
我将描述这两种方法的优缺点。
在项目的根目录中，转到 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中文网其他相关文章！
