`Title`

Question

＆lt; p＆gt;使用＆lt; code＆gt; TranslateService＆lt; / code＆gt;在Angular我想要＆lt; code＆gt;＆lt; title＆gt;＆lt; / code＆gt;位于＆lt; code＆gt; index.html＆lt; / code＆gt;中的标记用不同的语言。＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt;＆lt; title translate＆gt; application.title＆lt; / title＆gt; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;我翻译所有其他html标签，除非它们是自定义html标签，然后它就像这样：＆lt; / p＆gt; ＆LT;预＆GT;＆LT;代码＆GT; {{ “document.name” |翻译}} ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;问题可能是index.html在文件夹＆lt; / p＆gt;中处于不同的级别＆LT; p为H. SRC＆LT峰; br＆GT; | -app＆LT峰; br＆GT; .... | - 翻译＆lt; br＆gt; | -index.html＆LT; / p为H.

Answer 1

来自angular docs：

Title

由于Angular应用程序无法在整个HTML文档（<html>标记）上进行自举，因此无法绑定到HTMLTitleElement元素的text属性（表示<title>标记）。相反，此服务可用于设置和获取当前标题值。

您只需将Title服务与TranslateService

结合使用即可

export class SomeComponent {
  constructor(private title:Title, private translate:TranslateService){}
  ngOnInit(){
    this.translateService.get("document.name").subscribe(name=>{
      this.title.setTitle(name);
    });
  }
}

请同时查看this cookbook。

Answer 2

我正在将ngx-translate与xliffmerge配合使用，以防止覆盖现有文本并将新文本自动添加到xlf文件中。但是仅当模板中存在文本时才添加文本。因此，可接受的答案不是我想要的。

相反，我创建了一个指令，可以用来在每个页面的html元素中添加标题。现在，标题会自动翻译，然后该指令将获取文本并通过Angulars标题服务更改标题。

指令：

componentDidMount()/componentWillMount()/ even in render(){}

然后在必须更改标题的任何页面（组件）上，例如显示字词的页面：

import { Directive, ElementRef, AfterContentInit  } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Directive({
  selector: '[edHeadTitle]'
})

export class HeadTitleDirective implements AfterContentInit{

  constructor(private el: ElementRef,private titleService: Title) {}

  ngAfterContentInit(){
    this.titleService.setTitle(this.el.nativeElement.innerHTML);
  }

}

如果您不希望标题显示在页面上，只需在headerTitle css类中设置“ display：none”。

Angular TranslateService翻译<title>标签

2 个答案:

`Title`