在NG2中设置区域设置-分页

npm install @ngx-translate/core @ngx-translate/http-loader --save

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

<h1>{{ 'HELLO' | translate }}</h1>

npm install angular-pagination --save

import { PaginationModule } from 'angular-pagination';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    PaginationModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  itemsPerPage = 10;
  currentPage = 1;
  items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  onPageChange(pageNumber: number) {
    this.currentPage = pageNumber;
  }
}

<ul>
  <li *ngFor="let item of items | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage }">
    {{ item }}
  </li>
</ul>

<pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>