如何从容器组件翻译角度插值字符串

Question

我都;)

我是 Angular 新手，我想从 Angular 中使用 i18n。但是，当我想使用插值 {{}} 翻译角度类中的文本时，我不知道该怎么做。

我有一个组件工具栏，这个工具栏包含一个标题，当事件被触发时会改变。此事件包含要显示的标题。但是我怎样才能用 i18n 翻译这个标题呢？

我尝试了选择： {title, select, title1 {我的标题是 1} title2 {我的标题是 2} title3 {我的标题是 3}} 但我认为这不是一个很好的解决方案

组件类：

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styles: []
})
export class StartComponent implements OnInit {
  public title : string;

  constructor(private communicate: CommunicateService) {
  }

  ngOnInit() {
      this.subscription = this.communicate.getTitle().subscribe(
              title => this.title = title,
              (err: any) => console.error(err)
          );
  }
}

HTML 模板：

<div class="toolbar">{{title}}</div>

所以，我的问题是……我该如何翻译 title ？ 我认为还有其他类似的问题，所以所有建议都值得赞赏。

提前感谢您帮助我:)

Answer 1

您可以在您的内部使用插值和 html 标记 翻译。

请参阅documentation。

所以像<div class="toolbar" i18n>Welcome to {{companyName}}!</div> 这样的简单 i18n 标签应该可以做到。

在呈现的 .xlf 文件中看起来像：

<trans-unit id="91073dbc0b03be401d8c83b8e9c1513c3fa87b14" datatype="html">
  <source>Welcome to <x id="INTERPOLATION" equiv-text="{{ companyName }}"/>!</source>
    <context-group purpose="location">
    <context context-type="sourcefile">app/login/welcome-screen/welcome-screen.template.html</context>
    <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

我希望能回答你的问题:)

根据以下 cmets 进行编辑：

要解决您的特定问题，您可以编写 start.template.html 如下：

<div style="display: none">
   <span #firstTitle i18n>First title</span>
   <span #secondTitle i18n>Second title</span>
   <span #thirdTitle i18n>Third title</span>
</div>
<div>{{ title }}</div>

使用i18n 标签编写隐藏元素是一种常见的解决方法，因为您现在无法在组件或服务内部进行翻译。 （欲了解更多信息，请参阅post）

在 start.component.ts 中，您可以订阅路由器更改并设置相应的标题，如：

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styles: []
})
export class StartComponent implements OnInit {
  public title : string;
  @ViewChild('firstTitle') firstTitle: ElementRef<HTMLSpanElement>;
  @ViewChild('secondTitle') secondTitle: ElementRef<HTMLSpanElement>;
  @ViewChild('thirdTitle') thirdTitle: ElementRef<HTMLSpanElement>;

  constructor(private router: Router) {}

  ngOnInit() {
     this.router.events.subscribe((event) => {
       if(event.url) {
         setTitleByUrl(event.url);
       }
     });
   }

   private setTitleByUrl(url: string) {
     if (url === 'firstUrl') {
        title = this.firstTitle.nativeElement.textContent;
     } else if (url === 'secondUrl') {
        title = this.secondTitle.nativeElement.textContent;
     } else if (url === 'thirdUrl') {
        title = this.thirdTitle.nativeElement.textContent;
     }
   }
}

在此处订阅 Angular 路由器（更多详情请查看 here）并设置标题。