嘿，我来帮你搞定Angular组件类中文本的翻译问题！既然你已经按照官方指南搞定了HTML模板的i18n，那组件.ts里的文本（比如你提到的页面标题）其实用$localize就能轻松解决，具体步骤如下：

1. 在组件中使用$localize标记文本 #

Angular提供的$localize工具函数可以直接在TypeScript代码中标记需要翻译的内容，结合你给出的Title服务示例，修改后的代码如下：

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  constructor(private titleService: Title) { }

  ngOnInit(): void {
    // 用$localize包裹标题文本，添加唯一翻译ID方便识别
    const translatedTitle = $localize`:@@examplePageTitle:示例页面标题`;
    this.titleService.setTitle(translatedTitle);
  }
}

这里的@@examplePageTitle是自定义的翻译ID，和你在模板中用i18n="@@xxx"的作用一致，确保提取翻译时能精准对应。

2. 提取并翻译文本 #

你之前使用的ng extract-i18n命令会自动识别$localize标记的文本，把它加入到生成的.xlf/.xliff翻译文件中。之后你只需要像处理模板文本一样，在翻译文件中添加对应语言的译文即可。

3. 动态文本的翻译处理 #

如果组件中的文本包含变量（比如用户名称），可以用占位符来处理：

const userName = 'Eric';
const welcomeMessage = $localize`:@@welcomeMsg:欢迎回来，{userName}!:{userName}:${userName}`;

占位符{userName}会被变量值替换，翻译时也能保持结构一致。

额外提示 #

• 如果你使用的是Angular 9之前的版本，需要额外安装@angular/localize包，并在polyfills.ts中导入它才能使用$localize。
• 翻译ID最好保持全局唯一，避免不同文本被错误匹配。

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