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>

所以，我的问题是...如何翻译标题？我认为还有其他类似的问题，因此请大家多加注意。

预先感谢您的帮助：）

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>

我希望能回答您的问题：）

根据以下评论进行编辑：

要解决您的特定问题，您可以将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）并设置标题。

Answer 2

如果您想使用多种语言并在运行时切换语言，我建议您看看NGX Translate

如何从容器组件转换角度插值字符串

2 个答案: