Angular 9 引入了需要加载的全局“$localize()”函数

typescript

# Angular 9 中的全局 $localize() 函数引入

随着 Angular 9 的发布，我们迎来了一项重要的功能增强，即全局$localize()函数的引入。这个函数的加入为 Angular 应用的国际化提供了更灵活和强大的工具。在本文中，我们将深入探讨$localize()函数的作用，以及如何在实际项目中使用它。

## $localize() 函数的作用

$localize()函数的主要目的是简化 Angular 应用中的国际化过程。它提供了一种更自然的方式来处理本地化字符串，同时还支持在编译时进行翻译。这意味着我们可以在构建应用时将本地化信息嵌入到应用中，而不必等到运行时再进行翻译。

## 使用 $localize() 的基本语法

在使用$localize()函数时，我们可以直接在代码中嵌入需要翻译的文本。语法如下：

typescript
const localizedText = $localize<code>:@@uniqueId 文本内容</code>;

这里，@@uniqueId是一个唯一标识符，用于关联翻译的原始文本和相应的翻译文本。在实际项目中，我们需要为每个需要本地化的字符串提供一个唯一的标识符。

## 示例代码

为了更好地理解$localize()的使用，让我们看一个简单的示例。考虑以下组件：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-greet',
  template: <code>
    <div>
      
${'$'}localize%%</code>:@@greetMessage 你好，世界！%%<code>
    </div>
  </code>,
})
export class Greetcomponent {}

在这个示例中，我们使用$localize()函数将“你好，世界！”这个字符串进行本地化。@@greetMessage是用于唯一标识这个字符串的标识符。

## 利用 $localize() 实现动态文本

除了静态文本，$localize()函数还支持动态文本的本地化。我们可以在模板中使用变量，使得文本内容更具动态性。以下是一个示例：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-greet-user',
  template: <code>
    <div>
      
<img src="https://img.izhida.com/topic/e80f17310109447772dca82b45ef35a5.jpg" alt="etc"><br>etc
${'$'}localize%%</code>:@@greetUserMessage 欢迎，{{ userName }}！%%<code>
    </div>
  </code>,
})
export class GreetUserComponent {
  userName = 'John Doe';
}

在这个例子中，userName变量是动态插入到本地化字符串中的部分。

##

Angular 9 引入的全局 $localize() 函数为开发者提供了更加便捷和强大的国际化工具。通过使用$localize()，我们能够更自然地处理本地化字符串，同时在编译时进行翻译，提高了应用的性能。在实际项目中，合理利用这一特性将使得应用更具可维护性和可扩展性。