• 安裝簡述
  • 一般用法
  • <mat-paginator>的翻譯

安裝簡述

其實網上好多教學, 所以簡單紀錄

1
2
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
  • app.module.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export function createTranslateLoader(http: HttpClient) {
    //i18n的資料夾位置
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
    BrowserAnimationsModule, 
    PostModule, 
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
        }
    }), 
    AppRoutingModule
    ],
    declarations: [AppComponent],
    providers: [AppService],
    bootstrap: [AppComponent]
})
export class AppModule { }
  • share.module.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule
  ]
})
export class SharedModule { }
  • app.component.ts
1
2
3
4
5
6
7
8
9
export class AppComponent  {
  defaultLang = "en";

  constructor(public translate: TranslateService){
    translate.addLangs(["en" ,"tw"]);
    translate.setDefaultLang(this.defaultLang);
    translate.use(this.defaultLang);
  }
}

一般用法

  • 切換語系
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@Component({
  selector: "app-post",
  template: `
    <p>{{'welcome' | translate}}</p>
    <button (click)="changeTranslate('tw')">繁體</button>
    <button (click)="changeTranslate('en')">英文</button>
  `
})
export class PostComponent implements OnInit {
 
  constructor(public translate: TranslateService) {}

  ngOnInit() {}

  changeTranslate(lang){
    this.translate.use(lang);
  }
}
  • 翻譯字串
1
2
3
4
5
constructor(private translate: TranslateService) {}
  
translate(str:string):string{
    return this.translate.instant(str);
}
  • placeholder
1
<input type="text" [placeholder]="'import_account' | translate">

mat-paginator頁碼的翻譯

接下來紀錄一下在angular - material的頁碼如何翻譯.

material安裝過程請參照官網,

先匯入MatPaginatorModule

  • shareModule
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatPaginatorModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatPaginatorModule,
    TranslateModule
  ]
})
export class SharedModule { }
  • 在post.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
export class PostComponent implements OnInit {
  PAGESIZEOPTIONS=[5,10,15]

  constructor(public translate: TranslateService) {}
  ngOnInit() {}

  setPage($event){
    console.log($event)
  }
}
  • post.component.html
1
2
3
4
5
6
7
8
<mat-paginator
      [pageIndex]="1"
      [length]="0"
      [pageSize]="10"
      [pageSizeOptions]="PAGESIZEOPTIONS"
      (page)="setPage($event)"
>
</mat-paginator>

那很多功能模塊都會有頁碼,

所以單純的在各個模塊翻譯各自的頁碼是比較不妥的,

加上實務上經常會切換語系,

所以會用到

1
2
3
this.translate.onLangChange.subscribe((e: Event) => {
     //do something
});

onLangChange能監聽語言變化,不管哪個模塊切了語系,

其他模塊都會跟著切換.

所以我們客製 MatPaginatorIntl

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import {TranslateService} from '@ngx-translate/core';
import {MatPaginatorIntl} from '@angular/material';
import {Injectable} from '@angular/core';

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  constructor(private translate: TranslateService) {
    super();

    this.translate.onLangChange.subscribe((e: Event) => {
      this.getAndInitTranslations();
    });

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {
    this.translate.get(['items_per_page', 'next_page', 'previous_page', 'of_label']).subscribe(translation => {
      this.itemsPerPageLabel = translation['items_per_page'];
      this.nextPageLabel = translation['next_page'];
      this.previousPageLabel = translation['previous_page'];
      this.changes.next();
    });
  }

 getRangeLabel = (page: number, pageSize: number, length: number) =>  {
    if (length === 0 || pageSize === 0) {
      return `0 / ${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} / ${length}`;
  }
}
1
2
3
4
5
//./assets/i18n/tw.json
  "items_per_page": "筆數",
  "next_page": "下一頁",
  "previous_page": "上一頁",
  "of_label": "of",
  • share.module.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    MatPaginatorModule,
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    MatPaginatorModule,  
  ],
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomMatPaginatorIntl
    }
  ]
})
export class SharedModule {}