如何通过下拉菜单使用ngx-translate实现国际化？

Question

我想通过下拉菜单实现国际化。资产中有 3 json 个文件，其中包含 3 种语言。当我在 dpopdown 菜单中 select 语言时，另一个组件中显示的值是 returns "object Object"，我无法理解如何修复它。

带有模板的组件，其中将显示值翻译文本

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})

export class HomeComponent implements OnInit {

  constructor( private translate: TranslateService ) {
    
  }

  
  ngOnInit() {
    this.translate.use('ru')
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>


<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 translate class="display-4">
      {{ translate || title }}
    </h1>
  </div>
</div>

带有下拉菜单的组件

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


@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit  {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('ru');
    
  }

  ngOnInit() {
    this.translate.use('en')
    this.translate.use('de')
  }

  changeLanguage(lang: string) {
    this.translate.use(lang);
    
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Husserliana</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#"></a>
      </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="bio">Биография</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'works'">Работы</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'husserl'">Гуссерль и история</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'gallery'">Фотогалерея</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'bibliography'">Библиография</a>
        </li>
    </ul>
    <div translate class="dropdown">
        <button class="btn btn-light dropdown-toggle" 
        type="button" id="dropdownMenuButton" 
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Translate
        </button>
        <button class="btn btn-light">Login</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <button class="dropdown-item btn-light" (click)="changeLanguage('ru')">
            ru
          </button>
          <button class="dropdown-item btn-light" (click)="changeLanguage('en')">
            en
          </button>
          <button class="dropdown-item btn-light" (click)="changeLanguage('de')">
            de
          </button>
        </div>
      </div>
  </div>
</nav>

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import AppRoutingModule from '../app/feature/app-routing/app-routing.module';
import { TranslateModule, TranslateLoader, TranslatePipe } from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';
import {HttpClientModule} from '@angular/common/http';



import { AppComponent } from './app.component';
import { HomeComponent } from './core/components/home/home.component';
import { BioComponent } from './core/components/bio/bio.component';
import { WorksComponent } from './core/components/works/works.component';
import { HusserlComponent } from './core/components/husserl/husserl.component';
import { GalleryComponent } from './core/components/gallery/gallery.component';
import { BibliographyComponent } from './core/components/bibliography/bibliography.component';
import { NavbarComponent } from './core/components/navbar/navbar.component';
import { SpringerApiService } from './shared/springer-api.service';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '../../../assets/i18n/', '.json');
}


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BioComponent,
    WorksComponent,
    HusserlComponent,
    GalleryComponent,
    BibliographyComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }),
  HttpClientModule
  ],
  exports: [],
  providers: [SpringerApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

Answer 1

您应该像这样更改您的模板：

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 translate class="display-4">
      {{ title | translate }}
    </h1>
  </div>
</div>

其中 title 是资源键之一。

参考官方示例ngx-translate - https://stackblitz.com/github/ngx-translate/example

https://github.com/ngx-translate/core#ngx-translatecore--

如何通过下拉菜单使用ngx-translate实现国际化？

How realize internationalization using by ngx-translate via dropdown menu?

ngx-translate

angular