Angular i18n：如何翻译TypeScript函数返回的HTML属性值？

Absolutely! You can handle translations for dynamic values returned by TypeScript functions using Angular's native i18n tools—no third-party libraries needed. Here's how to make it work for your scenario:

Core Approach: Use $localize in Your TypeScript Function #

Angular's $localize utility lets you mark dynamic text in your TypeScript code for translation. This text will be picked up by Angular's i18n extraction tool, just like static template content.

Step 1: Update Your Function with $localize #

Modify your CustomSectionDisplayName function to wrap translatable text with $localize, including a unique message ID (the @@ suffix) to map translations later:

CustomSectionDisplayName(section: string): string {
  switch (section) {
    case 'PersonDetails':
      // Mark the text for translation with a unique ID
      return $localize`:@@section.personDetails.title:Person Details`;
    case 'AddressDetails': // Example of another section
      return $localize`:@@section.addressDetails.title:Address Details`;
    default:
      return $localize`:@@section.default.title:Unknown Section`;
  }
}

If your function pulls values from a config object instead of a switch case, you can still use $localize there:

// Config object with localized strings
const sectionDisplayNames = {
  PersonDetails: $localize`:@@section.personDetails.title:Person Details`,
  // Add other sections here
};

CustomSectionDisplayName(section: string): string {
  return sectionDisplayNames[section] || $localize`:@@section.default.title:Unknown Section`;
}

Step 2: Extract Translatable Messages #

Run Angular's i18n extraction command to pull all marked text (including your function's content) into a translation file (e.g., XLIFF):

ng extract-i18n --output-path src/locale

This will generate a messages.xlf file in your src/locale folder.

Step 3: Add Translations to the XLIFF File #

Open the generated messages.xlf file, and for each message ID you defined, add a target language translation. For example, for Spanish:

<trans-unit id="section.personDetails.title" datatype="html">
  <source>Person Details</source>
  <target>Detalles de la Persona</target>
</trans-unit>

Step 4: Build Your Localized App #

Ensure your Angular project is configured for localization (check angular.json for the localize option in your build config). Then build for your target language:

ng build --localize --configuration=es

This will generate a localized build where the $localize-marked text is replaced with the translated content from your XLIFF file.

Why This Works #

Unlike static template attributes where you can use i18n-* directives, dynamic values from function calls need to be marked directly in the TypeScript code. $localize integrates seamlessly with Angular's native i18n pipeline, ensuring your dynamic text is included in the translation workflow just like static content.

内容的提问来源于stack exchange，提问作者Viswa