如何在按下按钮时更新 ngx-timeago 语言？

Question

我需要本地化 ngx-timeago。它工作正常，但我不知道如何在按下按钮时从德语切换到西班牙语。

这个模板：

{{ date | timeago:live}}

<div class="btn">Change Language</div>

这是我的模块的代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { TimeagoModule, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from 'ngx-timeago';

@NgModule({
  imports:      [ BrowserModule, FormsModule, TimeagoModule.forRoot({formatter: { provide: 
  TimeagoFormatter, useClass: TimeagoCustomFormatter },})
],
providers: [TimeagoIntl],
declarations: [ AppComponent, HelloComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是我的组件的代码：

import { Component } from '@angular/core';
import { strings as stringsDe } from 'ngx-timeago/language-strings/de';
import { strings as stringsEs } from 'ngx-timeago/language-strings/es';
import { TimeagoIntl } from 'ngx-timeago';

@Component({
selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(intl: TimeagoIntl) {
    intl.strings = stringsEs;
    intl.changes.next();
  }
  name = 'Angular';
  date = new Date();
}

我创建了一个 demo。

非常感谢！

Answer 1

您需要在按钮上添加(click)并进行相应绑定：

<div class="btn" (click)="changeLang()">Change Language</div>

在组件:

  changeLang(){
    this.intl.strings = stringsEs;
    this.intl.changes.next();
  }

试试这个 demo

如何在按下按钮时更新 ngx-timeago 语言？

How can I update ngx-timeago language on button press?

html

javascript

localization

typescript

angular