在Angular 5应用程序中使用ngx-translate和ng2-select

Question

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

是否有一种使用管道或指令的方法，以便使其保持一致性。

提前感谢您的回答。

- Ngoc Nam Nguyen

---

你找到解决方案了吗？我也在尝试同样的事情。 - Iosif Petre

嗨@IosifPetre，感谢您的回答，最终我基于ngx-bootstrap创建了自己的下拉组件。 - Ngoc Nam Nguyen

好的，您能展示一下您的解决方案吗？您定制的下拉菜单组件可能会帮助其他人尝试做同样的事情。 - Iosif Petre

Answer 1

我的解决方案是创建一个管道，并将其用于选择器的项目：

<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;
    }
}

- Iosif Petre

---

只要使用本地的ngx-translate管道将[placeholder]绑定为[placeholder]=" 'my.translation' | translate"，它也适用于占位符。 - axelferreira

不建议使用translateService.instant，请参考https://github.com/ngx-translate/core/issues/516。如他所提到的：“您需要知道何时加载了翻译并且可以安全地使用此方法，如果不确定，则应改用`get`方法。” - Vahid Forghani

Answer 2

我的解决方案受到Iosif的启发，但由于translateService的异步特性，我无法使其正常工作。

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

因此，这是我处理以上两个问题的解决方案（我也编写了一个管道）：

依赖项： Angular 6 "@ng-select/ng-select": "2.5.1", "@ngx-translate/core": "^10.0.2",

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

// ... 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
下面的代码中的items将是您的翻译键数组，类似于：
['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>

希望这有所帮助。

- ng-kode

---

TranslateService 的语言更改观察器非常有帮助！谢谢。 - Firiam

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接口，以便在Angular表单中使用。

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;
  }

}

在模板的循环中，您可以使用translate管道与itemLabel(item)一起使用。

- Ngoc Nam Nguyen