角度5のアプリでng2-selectとngx-translateを使用

Question

ng2-selectの項目にngx-translateを使用します。私が考えることができる唯一の方法は、翻訳サービスを使用して、バインディングの前にtsファイル内のアイテムのテキストを変更することです。

パイプまたはディレクティブを使用して一貫性を持たせる方法がありますか。

ありがとうございます。

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

Answer 2

として型指定されたオブジェクトを渡しますドロップダウンを使用し、親ドロップダウンコンポーネントに従います。

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

それから私は、forループの角の形で、テンプレートのインサイド

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

} 

利用できるようにControlValueAccessorを実装するために私のドロップダウンコンポーネントを持っている、あなたはITEMLABEL（アイテム）とパイプを翻訳使用することができます。