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!