翻译 splitButton 的标签 - PrimeNG答案

【问题标题】：Translate label of splitButton - PrimeNG翻译 splitButton 的标签 - PrimeNG
【发布时间】：2022-11-24 02:49:31
【问题描述】：

我正在尝试从“p-splitButton”翻译项目，但我不能，因为“项目”是一个对象。我该怎么做？

[model]="items | translate"

应用程序组件.html

<p-splitButton
  label="Save"
  icon="pi pi-plus"
  (onClick)="save('info')"
  [model]="items | translate"
></p-splitButton>

应用程序组件.ts

import { Component} from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent { 
    items: MenuItem[];
    
    constructor() {}
    
    ngOnInit() {
        this.items = [
            {label: 'Example 1', icon: 'pi pi-info', url: 'http://angular.io'},
            {label: 'Example 2', icon: 'pi pi-info', url: 'http://angular.io'},
        ];
    }
}

【问题讨论】：

不幸的是，你不能用 translate 管道做到这一点，因为 PrimeNg 没有给出这样做的方法，但是你可以在翻译发生变化时更新组件中 items 中的标签键，我知道这很难看但我可以只考虑这个或者你可以创建你的自定义组件
或者您可以使用自己的逻辑创建一个名为 translateArray 的新管道 :)

标签： angular typescript primeng split-button

【解决方案1】：

您可以使用不纯的管道，以便检测到对象的变化，然后翻译标签并重新分配值

@Pipe({
  name: 'translate',
  pure: false,
})
export class TranslatePipe implements PipeTransform {
  transform(value: MenuItem[]): any {
    value.forEach(val => val.label = translateFn(val.label))
    return value
  }
}

【讨论】：