如何使用 ngx-translate 翻译角材料垫按钮中的文本标签答案

【问题标题】：How to translate the text label in angular material mat-button using ngx-translate如何使用 ngx-translate 翻译角材料垫按钮中的文本标签
【发布时间】：2020-01-04 18:54:16
【问题描述】：

我正在使用角材料组件示例 mat-menu mat-button 并使用 ngx-translate 来翻译我的应用程序中的标签。但是 html 的所有其他元素都在被翻译，但使用 mat-button 和 mat-tabs ngx-translate 等角度材料类不起作用。请帮忙

我在我的代码中尝试了以下内容。

这是我使用 [translate] 指令的 html 文件。

<button mat-button [matMenuTriggerFor]="file" [hidden]="isFullScreen" [translate] = "'FILE.MENU_FILE'" #matformbutton = "matButton" >{{fileMenu.name}}</button>
  <button mat-button [matMenuTriggerFor]="edit" [hidden]="isFullScreen" [translate] = "'EDIT.MENU_EDIT'" #matformbutton = "matButton">{{editMenu.name}}</button>
  <button mat-button [hidden]="isFullScreen" [translate] = "'VIEW.MENU_VIEW'" #matformbutton= "matButton">{{viewMenu.name}}</button>

还有我的 component.ts 文件

import { TranslateService } from '@ngx-translate/core';

declare var $ :any;

constructor( public translateService: TranslateService) { 
    translateService.addLangs(['en_gb', 'zh', 'en']);
    translateService.setDefaultLang('en');

    let browserLang =  translateService.getBrowserLang();
    browserLang = navigator.language;
    if (browserLang.indexOf('-') !== -1) {
      browserLang = browserLang.split('-')[0];
    }
    console.log('Language', browserLang);
    translateService.use(browserLang.match(/en|zh|en_gb/) ? browserLang : 'en');
  }

  ngOnInit() {
    let m;
    let n;
    const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
    if ( isIEOrEdge ) {
  $.ajax({
    url: 'http://ajaxhttpheaders.appspot.com',
    dataType: 'jsonp',
    success(headers) {
        let language = headers['Accept-Language'];
        m = language.split(',');
        n = m[0].toString();
        if (m[0].indexOf('-')) {
          m[0] = m[0].split('-');
          n = m[0][0].toString();
        }
        console.log(typeof(n));

    }
});
  setTimeout(() => {
  this.useLanguage(n);
}, 3000);

} else {
    let browserLang = navigator.language;
    if (browserLang.indexOf('-') !== -1) {
      browserLang = browserLang.split('-')[0];
    }
    this.useLanguage(browserLang);
  }
  }

  useLanguage(language: string) {
    console.log('Language called:', language);
   // this.data.addNewTabWithCanvas(language);
    this.translateService.use(language);
  }

【问题讨论】：

哪些条款没有翻译？
按钮文本中的所有术语，即按钮文本 {{filemenu.name}} 、 {{filemenu.edit}} 和 {{filemenu.view}} 他们没有得到翻译。当我删除 mat-button 他们被翻译的那一刻。

标签： angular angular-material ngx-translate

【解决方案1】：

其实我也遇到过。
这可能是内部使用 mat-button 主体的方式，使用 translate 指令没有帮助。我必须为mat-button 按钮内的每个文本使用translate 管道。例如：

<button mat-button>{{ fileMenu.name | translate }}</button>

【讨论】：

martin：您是否也对 .ts 文件进行了任何更改？因为我们应该将要翻译的文本指向哪里
不，您不需要更改任何内容。确保翻译确实存在，例如通过在组件中手动调用TranslateService.get。
你能给出一个演示示例吗，因为我的组件文件包含所有内容，并且我已经给出了代码，你也可以让我知道在哪里进行更改。 ?这将是一个很大的帮助

【解决方案2】：

终于在我的代码中添加了这个解决方案

<button mat-button [matMenuTriggerFor]="file" [hidden]="isFullScreen">**<span [translate] = "'FILE.MENU_FILE'">{{fileMenu.name}}</span>**</button>
  <button mat-button [matMenuTriggerFor]="edit" [hidden]="isFullScreen"><span [translate] = "'EDIT.MENU_EDIT'">{{editMenu.name}}</span></button>
  <button mat-button [hidden]="isFullScreen" > <span [translate] = "'VIEW.MENU_VIEW'">{{viewMenu.name}}</span></button>

即在按钮标签中添加跨度将解决此问题

【讨论】：