角 4; paginator 的“每页项目”翻译答案

【问题标题】：Angular 4; paginator's "items per page" translation角 4; paginator 的“每页项目”翻译
【发布时间】：2018-05-08 06:00:05
【问题描述】：

我在 Angular 4 上使用材料设计。我有一个底部带有分页器的表格：

有没有办法在 Angular4 中翻译“每页的项目数”？

我通过

访问了这个标签

this.paginator._intl.itemsPerPageLabel

在我的组件的 .ts 文件中，我将其放入 ngOnInit()

我在 i18n fo .json 文件中也有翻译，其结构是：

"MESSAGES_LIST_TABLE": {
      "DATE": "Date",
      "FROM": "From",
      "TO": "To",
      "MESSAGE": "Message",
      "AMOUNT": "Amount",
      "BALANCE": "Balance",
      "AVAILABLE_BALANCE": "Avail. bal",
      "ITEMS_PER_PAGE": "Items per page"
}

我可以这样翻译吗？

this.paginator._intl.itemsPerPageLabel = {{'CUSTOMER.MESSAGES_LIST_TABLE.ITEMS_PER_PAGE' | translate}}

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

你制作了一个从 MatPaginatorIntl 扩展的 Injectable

@Injectable()
export class MatPaginatorIntlGerman extends MatPaginatorIntl {
    itemsPerPageLabel = 'Pro Seite: ';
    nextPageLabel = 'Nächste Seite';
    previousPageLabel = 'Vorherige Seite';

    getRangeLabel = (page: number, pageSize: number, length: number) => {
        return ((page * pageSize) + 1) + ' - ' + ((page * pageSize) + pageSize) + ' von ' + length;
    }
}

并在你的模块中像这样提供它

{
    provide: MatPaginatorIntl,
    useClass: forwardRef(() => MatPaginatorIntlGerman)
}

【讨论】：

我必须将@Injectable() 放在我的组件.ts 文件中吗？在 ngOnInit() 下的某个地方？
您可以将它放在组件底部的某个位置或新文件中。
好的，我知道了，谢谢。如果我还想翻译成其他语言以及如何实施，您有什么想法吗？
我不能 100% 确定，但我认为最好的方法是不在扩展的 MatPaginatorIntl 中手动编码标签，而是通过服务加载它们，具体取决于当前语言。跨度>

【解决方案2】：

https://stackoverflow.com/a/51113262/7296430

//Atribute @ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit(){ ... this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.'; ... }

【讨论】：

与其发布另一个问题的确切答案（仅在上下文较少的情况下），不如将此问题标记为另一个问题的重复。
优秀而快速的答案。谢谢你

【解决方案3】：

创建一个新的 MatPaginatorIntl 实例并将其包含在自定义提供程序中，如 angular material documentation 中所述。

【讨论】：