如何让 angular 翻译 ts 文件中的多个值并具有参数？

Question

this.snackBar.open(
            `Only files of size less than ${this.fileSizeAllowed}KB are allowed`,
            this.translate.instant('USER_REG.close'),
            
            {
              panelClass: 'errorSnackbar',
              duration: 5500,
            }
          );

我只想将 snackBar 中显示的消息，即“只有小于以下大小的文件”翻译成另一种语言，然后是动态变量，然后是“允许 KB”行 translated.How 做吗？ angular 翻译完全陌生！！！

Answer 1

也许这个答案可以帮到您：

您是否尝试过以下操作？

this.snackBar.open(
            this.translate.instant('FIRST.MESSAGE')+ ${this.fileSizeAllowed} + this.translate.instant('SECOND.MESSAGE'),
            this.translate.instant('USER_REG.close'),
            
            {
              panelClass: 'errorSnackbar',
              duration: 5500,
            }
          );

Answer 2

您可以在模板字符串文字中使用 translate.instant 方法。注意 than 后面的 space。如果翻译服务删除了 space，您可以在第一个 ${} 块之后添加它。

this.snackBar.open(
`${this.translate.instant('Only files of size less than ')}${this.fileSizeAllowed}${this.translate.instant('KB are allowed')}`, 
this.translate.instant('USER_REG.close'), 
{ panelClass: 'errorSnackbar', duration: 5500, } 
);

Answer 3

您可以像下面的代码一样简单地使用参数

    this.snackBar.open(
this.translateService.stream('MESSAGEKEY', { dynamicVariable: this.fileSizeAllowed}).subscribe((res) => { return res; })
this.translate.instant('USER_REG.close'),                
                {
                  panelClass: 'errorSnackbar',
                  duration: 5500,
                };
    );

在您的资源文件中，该值将为

'MESSAGEKEY' : "Only files of size less than" {{ dynamicVariable }} "KB are allowed"

如何让 angular 翻译 ts 文件中的多个值并具有参数？

How to have angular translate of for multiple values in a ts file and also having the parameters?

angular

typescript

angular-translate