반응형
Angular 4에서 매트-페이지네이터를 어떻게 번역합니까?
Angular Angular's의 "를 어떻게할 수 ?mat-paginator 술래잡기?mat-paginator재료 설계의 요소입니다.
당신은 할 수 .MatPaginatorIntl이를 위하여Will Howell은 더 이상 작동하지 않는 예를 만들었습니다. 따라서 여기 업데이트된 버전(네덜란드어 포함)과 단계별 지침이 있습니다.
-
MatPaginatorIntl@angular/material당신의 신청서에. - 예에서는 에 새 관리자 .
import { getDutchPaginatorIntl } from './app/dutch-paginator-intl';main.ts - 설정
provider이지관 안에 .main.ts파일을 사용하면 로컬 파일을 번역할 수 있습니다(기본 언어로 영어 대신).
providers: [
{ provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
]
- paginator-intl 파일 내에서 변환할 수 있는 문자열의 레이블을 설정하고 내보냅니다.해당 파일의 가장 중요한 부분(자세한 내용은 예제 참조):
paginatorIntl.itemsPerPageLabel = 'Items per pagina:';
paginatorIntl.firstPageLabel = 'Eerste pagina';
paginatorIntl.previousPageLabel = 'Vorige pagina';
paginatorIntl.nextPageLabel = 'Volgende pagina';
paginatorIntl.lastPageLabel = 'Laatste pagina';
paginatorIntl.getRangeLabel = dutchRangeLabel;
페이지 관리자 변환 파일을 시작점으로 하는 StackBlitz의 예.
- 6.x2018년 6월 - Angular 6.x 버전
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 6.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
- x2019 년 6월 - Angular 8.x 업이트데로트.
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 8.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
- x2020년 2월로 - Angular 9.x로업데트이트데.
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 9.x로 업그레이드되었습니다.패키지 버전이 변경되었습니다.주요 변경 사항은 Angular Material에서 가져오는 방법입니다.재료 루트에서 더 이상 가져올 수 없습니다.모듈에서 가져오기를 지정해야 합니다(material/paginator
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
- x2020년 6월 - Angular 10.x로업트데이트.
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 10.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
- x2020년 12월로 - Angular 11.x로업데트이트데업.
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 11.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
2021년 5월 - Angular 12.x로 업데이트
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 12.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
2022년 1월 - Angular 13.x로 업데이트
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 13.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
- 14.x2022년 6월로 - Angular 14.x로 업데이트
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 14.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
- x2022년 11월로 업데이트 - Angular 15.x로 업데이트
StackBlitz에서 업데이트된 이 예제는 프레임워크의 최신 버전을 수용하기 위해 Angular 15.x로 업그레이드되었습니다.패키지만 변경되었고 페이지 관리자 내부는 변경되지 않았습니다.
@ngx-translate를 사용하여 승인된 답변을 기반으로 수정된 솔루션(Angular 6 포함):
@NgModule({
imports: [...],
providers: [
{
provide: MatPaginatorIntl, deps: [TranslateService],
useFactory: (translateService: TranslateService) => new PaginatorI18n(translateService).getPaginatorIntl()
}
]
})
export class CoreModule {}
리고그.PaginatorI18n:
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
export class PaginatorI18n {
constructor(private readonly translate: TranslateService) {}
getPaginatorIntl(): MatPaginatorIntl {
const paginatorIntl = new MatPaginatorIntl();
paginatorIntl.itemsPerPageLabel = this.translate.instant('ITEMS_PER_PAGE_LABEL');
paginatorIntl.nextPageLabel = this.translate.instant('NEXT_PAGE_LABEL');
paginatorIntl.previousPageLabel = this.translate.instant('PREVIOUS_PAGE_LABEL');
paginatorIntl.firstPageLabel = this.translate.instant('FIRST_PAGE_LABEL');
paginatorIntl.lastPageLabel = this.translate.instant('LAST_PAGE_LABEL');
paginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
return paginatorIntl;
}
private getRangeLabel(page: number, pageSize: number, length: number): string {
if (length === 0 || pageSize === 0) {
return this.translate.instant('RANGE_PAGE_LABEL_1', { length });
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return this.translate.instant('RANGE_PAGE_LABEL_2', { startIndex: startIndex + 1, endIndex, length });
}
}
그리고.cz.json
{
"ITEMS_PER_PAGE_LABEL": "Počet řádků:",
"NEXT_PAGE_LABEL": "Další stránka",
"PREVIOUS_PAGE_LABEL": "Předchozí stránka",
"FIRST_PAGE_LABEL": "První stránka",
"LAST_PAGE_LABEL": "Poslední stránka",
"RANGE_PAGE_LABEL_1": "0 z {{length}}",
"RANGE_PAGE_LABEL_2": "{{startIndex}} - {{endIndex}} z {{length}}"
}
다음에서 ngx-translate 구성app.module.ts:
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
imports: [
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient] }
})
],
providers: [{ provide: LOCALE_ID, useValue: 'cs' }],
bootstrap: [AppComponent]
})
export class AppModule { }
빠르고 더러운 해결책은 이 .paginator를 사용합니다._intl 속성.
내 안에서...component.ts소유자:
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
...
this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.';
...
}
각도 9.0.0의 경우 i18n 패키지를 사용하는 경우 다음을 수행할 수 있습니다.
require: ng add @proxy/localization
my-paginator-intl.ts라는 파일을 만듭니다.
import { MatPaginatorIntl } from '@angular/material/paginator'
const matRangeLabelIntl = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return $localize`:@@paginator.zeroRange:0 in ${length}`
}
length = Math.max(length, 0)
const startIndex = page * pageSize
// If the start index exceeds the list length, do not try and fix the end index to the end.
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize
return $localize`:@@paginator.rangeOfLabel:${startIndex + 1} - ${endIndex} in ${length}`
}
export function MyPaginatorIntl() {
const paginatorIntl = new MatPaginatorIntl()
paginatorIntl.itemsPerPageLabel = $localize`:@@paginator.displayPerPage:Items per page`
paginatorIntl.nextPageLabel = $localize`:@@paginator.nextPage:Next page`
paginatorIntl.previousPageLabel = $localize`:@@paginator.prevPage:Prev page`
paginatorIntl.getRangeLabel = matRangeLabelIntl
return paginatorIntl
}
app.modulle.ts로 가져오기
import { MatPaginatorIntl } from '@angular/material/paginator'
import { MyPaginatorIntl } from './shared/paginator-int/my-paginator-intl'
@NgModule({
providers: [
{ provide: MatPaginatorIntl, useValue: MyPaginatorIntl() },
]
})
언어 xlf 파일에 다음을 복사합니다.
<trans-unit id="paginator.zeroRange">
<source>0 of <x id="PH" /></source>
<target>0 trong <x id="PH" /></target>
</trans-unit>
<trans-unit id="paginator.rangeOfLabel">
<source><x id="PH" /> - <x id="PH_1" /> of <x id="PH_2" /></source>
<target><x id="PH" /> - <x id="PH_1" /> trong <x id="PH_2" /></target>
</trans-unit>
<trans-unit id="paginator.displayPerPage">
<source>Items per page</source>
<target>Hiển thị/Trang</target>
</trans-unit>
<trans-unit id="paginator.nextPage">
<source>Next page</source>
<target>Trang kế</target>
</trans-unit>
<trans-unit id="paginator.prevPage">
<source>Prev page</source>
<target>Trang trước</target>
</trans-unit>
에 침입할 수 있습니다.MatPaginator._intl그리고 당신의 끈을 거기에 놓으세요.
forkJoin({
itemsPerPageLabel: this.translate.get('paginator.itemsPerPageLabel'),
nextPageLabel: this.translate.get('paginator.nextPageLabel'),
previousPageLabel: this.translate.get('paginator.previousPageLabel'),
firstPageLabel: this.translate.get('paginator.firstPageLabel'),
lastPageLabel: this.translate.get('paginator.lastPageLabel'),
}).subscribe(values => {
this.paginator._intl.itemsPerPageLabel = values.itemsPerPageLabel;
this.paginator._intl.nextPageLabel = values.nextPageLabel;
this.paginator._intl.previousPageLabel = values.previousPageLabel;
this.paginator._intl.firstPageLabel = values.firstPageLabel;
this.paginator._intl.lastPageLabel = values.lastPageLabel;
// 1 – 10 of 100
// https://github.com/angular/components/blob/master/src/material/paginator/paginator-intl.ts#L41
this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return this.translate.instant('paginator.getRangeLabel', {
startIndex: startIndex + 1,
endIndex,
length,
});
};
// Otherwise, the paginator won't be shown as translated.
this.dataSource.paginator = this.paginator;
});
저는 펠릭스의 대답을 바탕으로 하고, 그는 로이의 대답을 바탕으로 합니다.
전환을 은 동적언스를설명위기해하공방사법은용는하서를 사용합니다.TranslateService의stream()(방)의 정의)instance()을 반환합니다 언어가 설정될 때마다 실행되는 관찰 가능한 항목을 반환합니다.호출원에게도 전화를 합니다.change.next()강제로 다시 그립니다.
TranslateService단어의 "사전"을 반환할 수 있습니다.파일에 JSON 파일에는Object.assign()대부분의 일을 할 수 있습니다.
마지막으로 페이지 관리자를 다시 구현하지 않습니다.getRangeLabel()오히려 저는 오래된 값을 사용하여 "of"의 발생을 거친 텍스트로 대체합니다.
public getPaginatorIntl(): MatPaginatorIntl {
const paginatorIntl = new MatPaginatorIntl();
this.translation.stream('paginator.paginatorIntl').subscribe(dict => {
Object.assign(paginatorIntl, dict);
paginatorIntl.changes.next();
});
const originalGetRangeLabel = paginatorIntl.getRangeLabel;
paginatorIntl.getRangeLabel = (page: number, size: number, len: number) => {
return originalGetRangeLabel(page, size, len)
.replace('of', this.translation.instant('paginator.of'));
};
return paginatorIntl;
}
에 여기다니습있이 있습니다.fr.json예를들면.
{
"paginator": {
"paginatorIntl" : {
"itemsPerPageLabel": "Items par page",
"nextPageLabel": "Page suivante",
"previousPageLabel": "Page précédente",
"firstPageLabel": "Première page",
"lastPageLabel": "Dernière page"
},
"of": "de"
}
}
this.dataSource.paginator._intl.itemsPerPageLabel = "Your string here";
이것은 최신 각도 8 + 재료 8에서 작동했습니다;
MatPaginator의 모든 레이블을 변경할 수 있는 라코닉 솔루션입니다.
const rangeLabel: string = 'із';
const itemsPerPageLabel: string = 'Елементiв на сторiнцi:';
const firstPageLabel: string = 'Перша сторінка';
const lastPageLabel: string = 'Остання сторінка';
const previousPageLabel: string = 'Попередня сторінка';
const nextPageLabel: string = 'Наступна сторінка';
const getRangeLabel: (page: number, pageSize: number, length: number) => string = (
page: number,
pageSize: number,
length: number
): string => {
return new MatPaginatorIntl().getRangeLabel(page, pageSize, length).replace(/[a-z]+/i, rangeLabel);
};
export function getPaginatorIntl(): MatPaginatorIntl {
const paginatorIntl: MatPaginatorIntl = new MatPaginatorIntl();
paginatorIntl.itemsPerPageLabel = itemsPerPageLabel;
paginatorIntl.firstPageLabel = firstPageLabel;
paginatorIntl.lastPageLabel = lastPageLabel;
paginatorIntl.previousPageLabel = previousPageLabel;
paginatorIntl.nextPageLabel = nextPageLabel;
paginatorIntl.getRangeLabel = getRangeLabel;
return paginatorIntl;
}
@Felix의 다른 버전의 답변이지만 여기서는 클래스를 만들거나 인스턴스화할 필요 없이 직접 서비스를 함수에 주입합니다.
app.module.ts공급자 추가:
providers: [
YourCustomService,
{provide: MatPaginatorIntl, useFactory: getPaginatorI18n, deps: [YourCustomService]}
]
새합니다(예: 예: ts 파일).paginator-i18n.ts):
import {MatPaginatorIntl} from '@angular/material/paginator';
// This is the word that shows up in the range label
let paginPerRng = '';
const i18nRangeLabel = (page: number, pageSize: number, length: number) => {
if (length == 0 || pageSize == 0) {
return `0 ${paginPerRng} ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} ${paginPerRng} ${length}`;
};
export function getPaginatorI18n(YourCustomService: customService) {
const paginatorIntl = new MatPaginatorIntl();
// Call the localization methods in your service
paginatorIntl.itemsPerPageLabel = customService.getResource(...);
paginatorIntl.nextPageLabel = customService.getResource(...);
paginatorIntl.previousPageLabel = customService.getResource(...);
paginatorIntl.firstPageLabel = customService.getResource(...);
paginatorIntl.lastPageLabel = customService.getResource(...);
// We localize the word that shows up in the range label before calling the RangeLabel constant
paginPerRng = customService.getResource(...);
paginatorIntl.getRangeLabel = i18nRangeLabel;
return paginatorIntl;
}
현재 Angular Material 문서(10.2.0)에 따라 표시된 레이블과 텍스트를 수정하고 새 MatPaginator 인스턴스를 만듭니다.사용자 지정 공급자에 포함합니다.MatPaginatorModule을 가져와야 합니다(Paginator 구성 요소를 표시하려면 이 모듈이 필요합니다).
import { MatPaginatorModule } from '@angular/material/paginator';
구성요소(페이지 관리자를 사용하는 위치)에서 다음과 같은 방법으로 사용할 수 있습니다.
constructor(private paginator: MatPaginatorIntl) {
paginator.itemsPerPageLabel = 'Your custom text goes here';
}
ngx-translate를 사용한 간단한 솔루션.
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor(private translate: TranslateService){}
ngOnInit() {
this.translatePaginator();
}
async translatePaginator() {
const label = await this.translate.get('COMMON.ItemsPerPageLabel').toPromise();
this.paginator._intl.itemsPerPageLabel = label;
}언어를 동적으로 변경하려면 다음 코드를 입력할 수 있습니다.
this.translate.onLangChange.subscribe(() => {
this.getPaginatorIntl(matPaginatorIntl);
});
private getPaginatorIntl(matPaginatorIntl: MatPaginatorIntl): void {
matPaginatorIntl.itemsPerPageLabel = this.translate.instant('PAGINATOR.ITEM');
matPaginatorIntl.nextPageLabel = this.translate.instant('PAGINATOR.NEXT_PAGE');
matPaginatorIntl.previousPageLabel = this.translate.instant('PAGINATOR.PREVIOUS_PAGE');
matPaginatorIntl.firstPageLabel = this.translate.instant('PAGINATOR.FIRST_PAGE');
matPaginatorIntl.lastPageLabel = this.translate.instant('PAGINATOR.LAST_PAGE');
matPaginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
matPaginatorIntl.changes.next();
}
private getRangeLabel(page: number, pageSize: number, length: number): string {
if (length === 0 || pageSize === 0) {
return `0 ${this.translate.instant('PAGINATOR.OF')} ${ length }`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} ${this.translate.instant('PAGINATOR.OF')} ${length}`;
}
matPaginatorIntl 개체의 편집 뒤에 'changes.next();'를 삽입합니다.
만약 당신이 transloco를 사용하고 번역이 필요하다면,mat-paginator문자열, 프로젝트에 다음 유형의 스크립트 클래스를 추가합니다.
import { Injectable } from '@angular/core';
import { TranslocoService } from '@ngneat/transloco';
import { MatPaginatorIntl } from '@angular/material/paginator';
@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
ofLabel: string = 'of';
constructor(private _translate: TranslocoService) {
super();
this._translate.langChanges$.subscribe((lang) => {
this.getAndInitTranslations();
});
this.getAndInitTranslations();
}
getAndInitTranslations(): void {
this._translate.selectTranslate('paginator.itemsPerPageLabel').subscribe((value) => {
this.itemsPerPageLabel = value;
this.changes.next();
});
this._translate.selectTranslate('paginator.nextPageLabel').subscribe((value) => {
this.nextPageLabel = value;
this.changes.next();
});
this._translate.selectTranslate('paginator.previousPageLabel').subscribe((value) => {
this.previousPageLabel = value;
this.changes.next();
});
this._translate.selectTranslate('paginator.firstPageLabel').subscribe((value) => {
this.firstPageLabel = value;
this.changes.next();
});
this._translate.selectTranslate('paginator.lastPageLabel').subscribe((value) => {
this.lastPageLabel = value;
this.changes.next();
});
this._translate.selectTranslate('paginator.ofLabel').subscribe((value) => {
this.ofLabel = value;
this.changes.next();
});
}
getRangeLabel = (
page: number,
pageSize: number,
length: number,
): string => {
if (length === 0 || pageSize === 0) {
return `0 ${this.ofLabel} ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex =
startIndex < length
? Math.min(startIndex + pageSize, length)
: startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} ${
this.ofLabel
} ${length}`;
};
}
당신의 럼그당의에서.Module다음과 같이 부릅니다.
@NgModule({
imports: [
...
TranslocoModule,
],
providers: [
{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl } // >> add this line
]
})
ES 국제화를 위한 로컬 솔루션(해당 언어로 된 레이블 값만 변경), 초직접적이며 app.molde를 건드리지 않고:
import { MatPaginatorIntl } from '@angular/material/paginator';
...
constructor(
...
private paginator: MatPaginatorIntl
) {
paginator.nextPageLabel = 'Siguiente';
paginator.previousPageLabel = 'Anterior';
paginator.lastPageLabel = 'Última Página';
paginator.firstPageLabel = 'Primera Página';
paginator.itemsPerPageLabel = 'Registros por Página';
paginator.getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length == 0 || pageSize == 0) { return `0 de ${length}`; }
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} de ${length}`;
};
}
언급URL : https://stackoverflow.com/questions/47593692/how-to-translate-mat-paginator-in-angular-4
반응형
'programing' 카테고리의 다른 글
| 콘솔에서 대화형으로 값 읽기 (0) | 2023.08.18 |
|---|---|
| MYSQL 쿼리에서 열의 평균 계산 (0) | 2023.08.18 |
| MariaDB에서 프롬프트 기록을 제거할 수 있습니까? (0) | 2023.08.18 |
| ASP.NET에서 응답에 파일을 쓴 후 Post Back이 작동하지 않음 (0) | 2023.08.18 |
| Twitter 부트스트랩의 트리 (0) | 2023.08.18 |