Quảng cáo
Cập nhật thời gian thực bằng ngx-timeago
Cập nhật thời gian thực bằng ngx-timeago

ngx-timeago là thư viện giúp chúng ta có thể xây dựng thông báo về thời gian cập nhật thời gian thực dành cho Angular 6+. Các bạn có thể cài đặt bằng lênh sau cho project:

Demo | Nguồn

npm install ngx-timeago --save

Hướng dẫn sử dụng

1. Thêm TimeagoModule

Sau khi cài đặt trên thành công, bạn cần phải import thư viện của ngx-timeago vô AppModule bằng cách sau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TimeagoModule } from 'ngx-timeago';
 
@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule

Nếu như bạn sử dụng SharedModule, thì hãy export TimeagoModule để đảm bảo rằng bạn chỉ khai báo 1 lần nhé (không có tha lôi đi đâu)

@NgModule({
  exports: [
    CommonModule,
    TimeagoModule
  ]
})
export class SharedModule { }

Lazy loaded modules: thật sự cần thiết

Khi bạn lazyload 1 cái module, bạn phải sử dụng phương thức forChild để import TimeagoModule

@NgModule({
  imports: [
    TimeagoModule.forChild({
      formatter: {provide: TimeagoFormatter, useClass: CustomFormatter},
      clock: {provide: TimeagoClock, useClass: CustomClock},
      intl: {provide: TimeagoIntl, useClass: CustomIntl},
    })
  ]
})
export class LazyLoadedModule { }

Since lazy loaded modules use a different injector from the rest of your application, you can configure them separately with a different formatter/clock/intl service.

Sử dụng I18n

Mặc định, ngx-timeago không sử dụng i18n, mà việc này các bạn phải khai báo, cấu hình nó bằng cách sử dụng TimeagoCustomFormatter như 1 provide. Như vậy trong AppModule sẽ chỉnh như sau:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Timeago, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from 'ngx-timeago';
import { AppComponent } from './app';
 
export class MyIntl extends TimeagoIntl {
// do extra stuff here...
}
 
@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      intl: { provide: TimeagoIntl, useClass: MyIntl },
      formatter: { provide: TimeagoFormatter, useClass: TimeagoCustomFormatter },
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Trong component của bạn, muốn sử dụng ngôn ngữ nào bạn chỉ việc khai báo:

import { Component } from '@angular/core';
import { TimeagoIntl } from 'ngx-timeago';
import {strings as englishStrings} from 'ngx-timeago/language-strings/en';
 
@Component({
  selector: 'app',
  template: `
    <div timeago [date]="1553683912689"></div>
  `
})
export class AppComponent {
  constructor(intl: TimeagoIntl) {
    intl.strings = englishStrings;
    intl.changes.next();
  }
}

2. Sử dụng pipe hay directive là tuỳ ý

Nếu là sử dụng pipe

<div>{{1553683912689 | timeago:live}}</div>

Nếu sử dụng directive

<div timeago [date]="1553683912689" [live]="live"></div>

Chú ý: live mặc định true

Tự viết formatter cho mình

Nếu bạn muốn tự viết định dạng trả về của riêng mình, bạn cần phải tạo 1 class được implement từ TimeagoFormatter. Class này chỉ yêu cầu 1 phương thức format trả về kiểu string.

Ví dụ:

@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      formatter: {provide: TimeagoFormatter, useClass: CustomFormatter}
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Khi bạn đã định nghĩa lại kiểu formatter của riêng mình, bạn có thể được provide nó trong cấu hình. Nào viết 1 cái formatter xem sao

Own clock: ví dụ điển hình

Tạo 1 class MyClock mới, có phương thức tick trả về kiểu Observable<any>

import { TimeagoClock } from 'ngx-timeago';
import { Observable, interval } from 'rxjs';
 
// ticks every 2s
export class MyClock extends TimeagoClock {
  tick(then: number): Observable<number> {
    return interval(2000);
  }
}

Khai báo nó trong AppModule

@NgModule({
  imports: [
    BrowserModule,
    TimeagoModule.forRoot({
      clock: {provide: TimeagoClock, useClass: MyClock},
    })
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Chúc các bạn thành công!

Quảng cáo
Bài trước4 biểu hiện của người đàn ông “bất bại”
Bài tiếp theoTrung Quốc đã có thuốc chống virus corona bán ra thị trường
Nếu thấy bài viết của mình hay và hữu ích. Hãy chia sẻ nó tới nhiều bạn khác với nhé.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

This site uses Akismet to reduce spam. Learn how your comment data is processed.