반응형
MatPaginatorIntl을 사용하는 방법은 무엇입니까?
저는 매트 패지네이터 구성 요소를 사용하고 있으며 이러한 레이블을 변환하는 방법을 찾고 있습니다(문서는 이에 대해 충분히 명확하지 않습니다).
이 작업을 수행하는 방법을 보여주는 이 문서를 발견하고 다음 단계를 수행했습니다.
1 - 다음 파일을 만들었습니다.custom-paginator.ts그리고 다음과 같은 것들을 거기에:
import { MatPaginator, MatPaginatorIntl } from '@angular/material';
export class CustomPaginator extends MatPaginatorIntl {
constructor() {
super();
this.nextPageLabel = ' My new label for next page';
this.previousPageLabel = ' My new label for previous page';
this.itemsPerPageLabel = 'Task per screen';
}
}
2 - 인app.module.ts다음과 같이 입력합니다.
@NgModule({
// ...
providers: [
{
provide: MatPaginatorIntl,
useClass: CustomPaginator
}
]
})
export class AppModule
하지만, 그것은 단순히 아무것도 바꾸지 않습니다.제가 무엇을 빠뜨리고 있나요?
다음과 같이 할 수 있습니다.크로아티아어 라벨을 제공합니다.
customClass.ts
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
@Injectable()
export class MatPaginatorIntlCro extends MatPaginatorIntl {
itemsPerPageLabel = 'Stavki po stranici';
nextPageLabel = 'Slijedeća stranica';
previousPageLabel = 'Prethodna stranica';
getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return '0 od ' + 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 + ' od ' + length;
};
}
및 AppModule.ts:
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
Vinko Vorih 코드를 기반으로 ngx-translate로 작업하는 페이지 관리자를 만들었습니다. 코드는 다음과 같습니다.
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from "@ngx-translate/core";
export class PaginatorIntlService extends MatPaginatorIntl {
translate: TranslateService;
getRangeLabel = function (page, pageSize, length) {
const of = this.translate ? this.translate.instant('paginator.of') : 'of';
if (length === 0 || pageSize === 0) {
return '0 ' + 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 + ' ' + of + ' ' + length;
};
injectTranslateService(translate: TranslateService) {
this.translate = translate;
this.translate.onLangChange.subscribe(() => {
this.translateLabels();
});
this.translateLabels();
}
translateLabels() {
super.itemsPerPageLabel = this.translate.instant('paginator.items_per_page');
super.nextPageLabel = this.translate.instant('paginator.next_page');
super.previousPageLabel = this.translate.instant('paginator.previous_page');
this.changes.next();
}
}
모듈 공급자 항목에 다음과 같이 입력합니다.
{
provide: MatPaginatorIntl,
useFactory: (translate) => {
const service = new PaginatorIntlService();
service.injectTranslateService(translate);
return service;
},
deps: [TranslateService]
}
이런 식으로 번역을 일반적인 i18n 파일에 저장할 수 있으며 웹 앱이 로케일을 동적으로 변경할 수 있으면 페이지 관리자가 요청 시 번역됩니다.
만약 당신이 ngx-translate를 사용하는 동적 언어 스위치가 당신을 위해 작동하기를 원한다면, 여기 해결책이 있습니다, 그것은 저를 위해 작동합니다.
mat-reminator-i18n.service.ts.
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';
const ITEMS_PER_PAGE = 'Items per page:';
const NEXT_PAGE = 'Next page';
const PREV_PAGE = 'Previous page';
const FIRST_PAGE = 'First page';
const LAST_PAGE = 'Last page';
@Injectable()
export class MatPaginatorI18nService extends MatPaginatorIntl {
public constructor(private translate: TranslateService) {
super();
this.translate.onLangChange
//.pipe(takeUntil(...))
.subscribe((e: Event) => {
this.getAndInitTranslations();
});
this.getAndInitTranslations();
}
public getRangeLabel = (page: number, pageSize: number, length: number): string => {
if (length === 0 || pageSize === 0) {
return `0 / ${length}`;
}
length = Math.max(length, 0);
const startIndex: number = page * pageSize;
const endIndex: number = startIndex < length
? Math.min(startIndex + pageSize, length)
: startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} / ${length}`;
};
public getAndInitTranslations(): void {
this.translate.get([
ITEMS_PER_PAGE,
NEXT_PAGE,
PREV_PAGE,
FIRST_PAGE,
LAST_PAGE,
])
.subscribe((translation: any) => {
this.itemsPerPageLabel = translation[ITEMS_PER_PAGE];
this.nextPageLabel = translation[NEXT_PAGE];
this.previousPageLabel = translation[PREV_PAGE];
this.firstPageLabel = translation[FIRST_PAGE];
this.lastPageLabel = translation[LAST_PAGE];
this.changes.next();
});
}
}
사용 중인 모듈의 AppModule
@NgModule({
// ...
providers: [
{
provide: MatPaginatorIntl,
useClass: MatPaginatorI18nService,
},
],
})
export class AppModule {
// ...
en.json 등
{
"Items per page:": "Items per page:",
"Next page": "Next page",
"Previous page": "Previous page",
"First page": "First page",
"Last page": "Last page",
}
파일: matPaginatorIntlCroClass.ts
import {MatPaginatorIntl} from '@angular/material';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
itemsPerPageLabel = 'Items par page';
nextPageLabel = 'Page Prochaine';
previousPageLabel = 'Page Précedente';
}
파일: AppModule.ts:
import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'
@NgModule({
imports: [],
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
..
})
출처: https://material.angular.io/components/paginator/api
시작 인덱스가 목록 길이를 초과할 때 종료 인덱스를 수정했습니다.첫 페이지와 마지막 페이지에 대한 번역도 추가합니다.@angular/material 5.2.4 페이지 구성 요소용입니다.
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
@Injectable()
export class MatPaginationIntlService extends MatPaginatorIntl {
translate: TranslateService;
firstPageLabel = 'First page';
itemsPerPageLabel = 'Items per page';
lastPageLabel = 'Last page';
nextPageLabel = 'Next page';
previousPageLabel = 'Previous page';
getRangeLabel = (page: number, pageSize: number, length: number): string => {
const of = this.translate ? this.translate.instant('mat-paginator-intl.of') : 'of';
if (length === 0 || pageSize === 0) {
return '0 ' + of + ' ' + length;
}
length = Math.max(length, 0);
const startIndex = ((page * pageSize) > length) ?
(Math.ceil(length / pageSize) - 1) * pageSize:
page * pageSize;
const endIndex = Math.min(startIndex + pageSize, length);
return startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
};
injectTranslateService(translate: TranslateService) {
this.translate = translate;
this.translate.onLangChange.subscribe(() => {
this.translateLabels();
});
this.translateLabels();
}
translateLabels() {
this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
this.itemsPerPageLabel = this.translate.instant('mat-paginator-intl.items_per_page');
this.lastPageLabel = this.translate.instant('mat-paginator-intl.last_page');
this.nextPageLabel = this.translate.instant('mat-paginator-intl.next_page');
this.previousPageLabel = this.translate.instant('mat-paginator-intl.previous_page');
}
}
레이블을 새로 고치기 위해 레이블 변경 후 변경 이벤트를 실행할 수 있습니다.
translateLabels() {
this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
...
this.changes.next();
}
또한 Intl을 주입식 자체로 표시하여 주입식 서비스를 사용할 수 있습니다.예를 참조하십시오(DoneSubject의 세부 사항을 무시하고 현지화).맞춤형 구현인 서비스):
import { Injectable, OnDestroy } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { LocalizeService } from 'app/general';
import { DoneSubject } from 'app/rx';
import { takeUntil } from 'rxjs/operators';
@Injectable()
export class MatPaginatorIntlLoc extends MatPaginatorIntl implements OnDestroy {
constructor(private readonly localizer: LocalizeService) {
super();
localizer.locale$.pipe(takeUntil(this.done$)).subscribe(() => {
this.itemsPerPageLabel = localizer.translate('mat paginator label: items per page');
this.nextPageLabel = localizer.translate('mat paginator label: next page');
this.previousPageLabel = localizer.translate('mat paginator label: previous page');
this.firstPageLabel = localizer.translate('mat paginator label: first page');
this.lastPageLabel = localizer.translate('mat paginator label: last page');
});
}
private readonly done$ = new DoneSubject();
ngOnDestroy() { this.done$.done(); }
getRangeLabel = (page: number, pageSize: number, length: number) => this.localizer
.translate('mat paginator label: x of y', [
length > 0 && pageSize > 0 ? (page * pageSize + 1) + ' - ' + Math.min((page + 1) * pageSize, Math.max(length, 0)) : 0,
Math.max(length, 0),
]);
}
모듈에서 제공하는 것을 잊지 마십시오.
providers: [
...
{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlLoc },
...
]
위의 답변을 바탕으로 사용ngx-translate
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
@Injectable()
export class MatPaginatorIntlNl extends MatPaginatorIntl {
itemsPerPageLabel!: string;
nextPageLabel!: string;
previousPageLabel!: string;
ofLabel!: string;
constructor(private readonly translateService: TranslateService) {
super();
this.getTranslations();
}
async getTranslations() {
const translations = await this.translateService
.get(['TABLE.ITEMS_PER_PAGE', 'TABLE.NEXT_PAGE', 'TABLE.PREVIOUS_PAGE', 'COMMON.OF'])
.pipe(take(1))
.toPromise();
this.itemsPerPageLabel = translations['TABLE.ITEMS_PER_PAGE'];
this.nextPageLabel = translations['TABLE.NEXT_PAGE'];
this.previousPageLabel = translations['TABLE.PREVIOUS_PAGE'];
this.ofLabel = translations['COMMON.OF'];
}
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;
// 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.ofLabel} ${length}`;
};
}
MatPaginator 주입응용프로그램의 아무 곳에나 원하는 번역 및 호출 변경사항을 설정합니다.모든 언어 변경에 대해 반복합니다(예: ngx-translate를 사용할 때 onLangChange에 가입함).
저도 같은 문제가 있었고, Imports 문에서 TranslateModule을 TranslateModule로 변경했습니다. forRoot()
그래서 다음과 같이 보입니다.
imports: [
...
TranslateModule.forRoot()
...
]
NPM의 사이트 인용: "ForRoot 정적 방법은 서비스를 제공하고 동시에 구성하는 규약입니다.응용 프로그램의 루트 모듈에서만 이 메서드를 호출하고 대부분은 AppModule이라고 합니다.이 방법을 사용하면 로더, 파서 및/또는 누락된 번역 핸들러를 지정하여 Translate Module을 구성할 수 있습니다."
전체 기사는 다음과 같습니다. https://www.npmjs.com/package/ @ngx-dll/core
이 문서를 읽으면 Translate Module과 관련된 많은 문제를 해결하는 데 도움이 될 수 있습니다.
은 한가지언중것것사입다니는용하은요한급할것▁one다▁use니▁to입을 사용하는 것입니다.useClass에 useValue사용자 정의 구현을 클래스로 제공하는 경우.이는 매우 명백한 것으로 보이지만 일부 가이드가 여전히 사용하고 있기 때문에 쉽게 간과할 수 있습니다.useValue기능을 제공합니다.
{
provide: MatPaginatorIntl,
useClass: LocalizedPaginator
}
많은 옵션을 확인해 본 결과, 제 경우에 어떤 것이 효과가 있는지 그리고 저는 그것이 페이지네이터 문자열을 동적으로 번역하기 위한 가장 강력한 솔루션이라고 생각합니다.
mat-paginator-translator.ts // 프로젝트에 이 파일 추가
import {Injectable} from '@angular/core';
import {MatPaginatorIntl} from '@angular/material/paginator';
import {TranslateService} from '@ngx-translate/core';
@Injectable()
export class MatPaginatorTranslator extends MatPaginatorIntl {
itemsPerPageLabel: string;
nextPageLabel: string;
previousPageLabel: string;
firstPageLabel: string;
lastPageLabel: string;
constructor(private translateService: TranslateService) {
super();
}
getRangeLabel = (page: number, pageSize: number, length: number) => {
this.getTranslations();
return ((page * pageSize) + 1) + ' - ' + ((page * pageSize) + pageSize)
+ ' ' + this.translateService.instant('of') + ' ' + length;
};
private getTranslations() {
this.itemsPerPageLabel = this.translateService.instant('Items per page');
this.nextPageLabel = this.translateService.instant('Next page');
this.previousPageLabel = this.translateService.instant('Previous page');
this.firstPageLabel = this.translateService.instant('First page');
this.lastPageLabel = this.translateService.instant('Last page');
}
}
app.module.ts // 앱 모듈에 다음 변경 사항 추가
providers: [{
provide: MatPaginatorIntl,
useClass: MatPaginatorTranslator
}],
de.json // 임의의 변환 json 파일일 수 있습니다.
"Next page": "Nächste Seite",
"Previous page": "Vorherige Seite",
"First page": "Nächste Seite",
"Last page": "Nächste Seite",
"of": "von",
이 파일들을 올바른 위치에 두면 해결책을 얻을 수 있습니다.
언급URL : https://stackoverflow.com/questions/46869616/how-to-use-matpaginatorintl
반응형
'code' 카테고리의 다른 글
| Switch 문 외부의 Swift 열거형 관련 값에 액세스하는 방법 (0) | 2023.08.01 |
|---|---|
| TimeSpan을 형식 "hh:mm:ss"에서 "hh:mm"로 변환 (0) | 2023.08.01 |
| window.location을 업데이트하려면 어떻게 해야 합니까?문서를 건너뛰지 않고 해시하시겠습니까? (0) | 2023.07.27 |
| 프로그래밍에서 상수를 사용하는 이유는 무엇입니까? (0) | 2023.07.27 |
| objc_exception_throw에 중단점을 추가하는 방법은 무엇입니까? (0) | 2023.07.27 |