如何为含用户动态内容的Blazor应用实现动态翻译？

方案1：集成第三方翻译API #

直接调用通用翻译API处理动态文本，无需提前定义资源文件：

• 实现一个翻译服务类，封装API调用逻辑，注入到Blazor组件中。
• 组件接收用户动态内容后，调用服务的异步方法获取翻译结果。
• 示例代码：

  // 翻译服务接口
  public interface ITranslationService
  {
      Task<string> TranslateAsync(string sourceText, string targetLanguageCode);
  }
  
  // 组件中使用
  @inject ITranslationService TranslationService
  
  @if (string.IsNullOrEmpty(translatedText))
  {
      <p>翻译中...</p>
  }
  else
  {
      <p>@translatedText</p>
  }
  
  @code {
      [Parameter] public string DynamicContent { get; set; }
      private string translatedText;
  
      protected override async Task OnParametersSetAsync()
      {
          // 从全局状态获取当前目标语言，比如"fr"代表法语
          var targetLang = "fr";
          translatedText = await TranslationService.TranslateAsync(DynamicContent, targetLang);
      }
  }
  

• 额外优化：添加翻译结果缓存，避免重复调用API浪费资源。

方案2：客户端侧JS翻译库 #

通过JSInterop调用浏览器端的轻量翻译库，实现纯客户端动态翻译：

• 在wwwroot/index.html中引入目标JS翻译库。
• 编写JS函数封装翻译逻辑，在Blazor组件中调用该函数。
• 示例代码：

  // wwwroot/js/translation.js
  window.translateText = async (sourceText, targetLang) => {
      // 替换为实际JS翻译库的调用逻辑
      const result = await someJsTranslationLib.translate(sourceText, { to: targetLang });
      return result.text;
  };
  

  // Blazor组件中调用
  @inject IJSRuntime JSRuntime
  
  <p>@translatedContent</p>
  
  @code {
      [Parameter] public string UserDynamicText { get; set; }
      private string translatedContent;
  
      protected override async Task OnInitializedAsync()
      {
          translatedContent = await JSRuntime.InvokeAsync<string>(
              "translateText", 
              UserDynamicText, 
              "es" // 目标语言代码
          );
      }
  }
  

方案3：自定义动态翻译存储 #

如果需要可控的翻译内容，可通过数据库存储翻译对，实现本地化动态翻译：

• 创建数据库表，字段包含源文本、目标语言代码、翻译文本。
• 实现翻译服务，优先从数据库查询翻译结果，无匹配时可 fallback 到API翻译并自动入库。
• 优势：可后台维护翻译内容，避免依赖第三方API的网络问题。

通用注意事项 #

• 语言切换处理：监听全局语言状态变化，触发动态内容的重新翻译。
• 异步状态管理：翻译过程中显示加载提示，提升用户体验。
• 性能优化：对高频出现的动态文本添加内存缓存，减少API或数据库查询次数。

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