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

Question

我都;)

我是 angular 的新手，我想使用 angular 的 i18n。但是当我想使用插值 {{}} 翻译来自 angular class 的文本时，我不知道该怎么做。

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

我试过 select： {title, select, title1 {我的头衔是 1} title2 {我的头衔是 2} title3 {我的头衔是 3}} 但我认为这不是一个很好的解决方案

组件 class：

@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

You can use interpolations and html markup inside of your translations.

参见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）并设置标题。

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

How to translate angular interpolation string from container component

angular-i18n

angular