Question

我想对ng2-select中的项目使用ngx-translate。我能想到的唯一方法是使用translate服务并在绑定之前改变ts文件中的项目文本。

有没有办法使用管道或指令，因为我想让它保持一致。

提前致谢。

Answer 1

我的解决方案是创建一个管道并在select：

的项目上使用它

<ng-select [items]="listOfTimeOfExecution | selectOptionsTranslate" ...

和管道代码：

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from 'ng2-translate/ng2-translate';
import { SelectOption } from 'app/shared/entities';

@Pipe({name: 'selectOptionsTranslate'})
export class SelectOptionsTranslatePipe implements PipeTransform {
    constructor(public translateService: TranslateService){}

    transform(items: Array<SelectOption>) : Array<SelectOption> {
        for(let item of items) {
            item.text = this.translateService.instant(item.text);
        }
        return items;
    }
}

Answer 2

我的解决方案受到Iosif's的启发，因为translateService的 async特性

，我无法使其正常运行

第二，当用户更改语言时，我还需要翻译选项。

所以这是我的解决方案（我也写了一个管道）来处理上述两个问题：

依赖项：
角度6
“ @ ng-select / ng-select”：“ 2.5.1”，
“ @ ngx-translate / core”：“ ^ 10.0.2”，

translate-options.pipe.ts
（将其导入到app.module.ts的声明数组中的Rmbr）

// ... Rmbr to import the libs ...

@Pipe({
  name: 'translateOptions',
})
export class TranslateOptionsPipe implements PipeTransform, OnDestroy {

  constructor(private translateService: TranslateService) { }


  transform(items: any) {    
    const observable = Observable.create(observer => {
        this.translateService.get(items).subscribe(result => {            
            // result will be an object
            // e.g. { 'JOBS.UX': 'UX Designer', 'JOBS.DEVELOPER': 'Developer' }
            observer.next(result);
        });        

        this.translateService.onLangChange.subscribe(event => {
            this.translateService.get(items).subscribe(result => {            
                observer.next(result);
            });
        })
    });

    return observable;
  }

  ngOnDestroy() {
    this.translateService.onLangChange.unsubscribe();
  }
}

app.component.html
以下代码中的项目将是您的翻译键的数组，例如：
['JOBS.DEVELOPER'，'JOBS.UX'，'JOBS.PM']

<ng-select
    [addTag]="true"
    [addTagText]="to.addTagText || 'Create item: '"
    [multiple]="to.multiple"
    [closeOnSelect]="!to.multiple"
    (change)="onAutoCompleteChange($event)"  
>
    <ng-option
        *ngFor="let item of items | translateOptions | async | keyvalue" 
        [value]="item.key"
    >
        {{ item.value }}
    </ng-option>
</ng-select>

希望有帮助

Answer 3

使用下拉列表的父级会将按以下方式键入的对象传递给下拉组件。

export interface IDropdownOptions {
  items: any[];
  itemType: 'action' | 'divider';
  itemLabel: (item: any) => string;

  itemClicked?: (item: any) => void; // overwriting default onChange function
  itemVisible?: (item: any) => boolean;
  itemSelectable?: (item: any) => boolean;

  selectedText: (() => string) | string;
  shortSelectedText?: (() => string) | string;
  // can define more for styling and custom purposes...
}

然后我有我的下拉组件来实现ControlValueAccessor以角度形式

import { Component, forwardRef, Input, } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { get } from 'lodash';

@Component({
  selector: 'c-dropdown',
  templateUrl: './dropdown.component.html',
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true }]
})
export class DropdownComponent implements ControlValueAccessor {
  @Input() options: IDropdownOptions;
  onChange: any = () => {};

  get itemLabel(): (item: any) => string {
    return !!get(this.options, 'itemLabel')
      ? this.options.itemLabel
      : () => '';
  }

  get itemClicked(): (item: any) => void {
    !!get(this.options, 'itemClicked')
      ? this.options.itemClicked
      : this.onChange;
  }

  // Getter functions for itemSelectable, itemVisible, etc.

  constructor() {}

  // Other inherited functions...

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

}

在模板的for循环中，您可以将translate管道与itemLabel（item）一起使用。

在Angular 5 app中使用ngx-translate和ng2-select

3 个答案: