Question

我正在使用角度材料组件示例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);
  }

Answer 1

实际上我也遇到过。
这可能是内部使用按钮垫主体的方式，而使用translate指令无济于事。我必须对translate按钮内的每个文本使用mat-button管道。例如：

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

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

即在button标签中添加span即可解决此问题

如何使用ngx-translate在角形材质的mat-button中翻译文本标签

2 个答案: