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

我所有人；）

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

我有一个组件工具栏，这个工具栏包含一个在触发事件时更改的标题。此事件包含要显示的标题。但是我如何用i18n翻译这个标题呢

我尝试了选择： {title，select，title1{我的title是1}title2{我的title是2}title3{我的title是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}

所以，我的问题是。。。如何翻译标题？ 我认为还有其他类似的问题，所以所有的建议都很感谢

提前感谢您帮助我：）

您可以在应用程序中使用插值和html标记 翻译

看

所以一个简单的i18n标记，比如

欢迎来到{{{companyName}}应该这样做

在呈现的.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>

在这里，您可以订阅Angular router（查看更多详细信息）并设置标题。
如果您想在运行时使用多种语言并在各种语言之间切换，我建议您查看一下使用can use translate pipe:{{title | translate}如何使用此translate pipe？它是角核的一部分吗？如果我这样做的话，我应该导入一个与翻译号对应的静态json文件？应该尽可能避免使用管道。这是可能的。请使用{{title}}您的项目设置是否已经使用了i18n，或者该设置是您问题的一部分？我正在寻找翻译我的未来角度项目的最佳方法，所以不，我的项目尚未使用i18n。但是我从来没有见过这种语法：文本你能给我一个文档的链接吗？这是一个第三方图书馆？是的，但这并不能回答我所说的（对不起，如果我的问题表达得不好，但我的英语不是很好）。我想要的是如果我得到：{{title}}所有文本都在title变量中。HTMLS中没有文本，是否要转换变量
title
自动具有的任何值？
this.communicate.getTitle（）
函数是什么样子的？是的，就是这个，this.communicate.getTitle（）根据当前URL给出一个标题（在page1=>page1标题，在page2=>page2标题，等等）（这可能不好？）嗯，那么您在服务中硬编码了字符串，并根据当前路线返回相应的标题？如果它们是在服务中硬编码的，以我的拙见，将它们移动到模板中会更干净<代码>一些标题

是的，我想在服务中硬编码。但是如何在模板中硬编码呢？我把我所有的标题放在不同的div中，当我更改页面时，我激活了好的标题？

<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>

@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;
     }
   }
}