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

가 그럼 난 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; 
    } 

} 

에 사용할 수 있도록 구현 내 드롭 구성 요소를 가지고, 당신은 ITEMLABEL (항목)와 파이프를 번역 할 수 있습니다.