使用 ngx-translate 添加标志图标选择（Angular 16）

Question

我想将 ngx-translat 添加到我的项目中，但我想从标志中添加选择。

目前，我的标志彼此靠近，如果我使用...它不起作用。

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


Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {


  constructor(private translateServeice: TranslateService) {
      translateService.setDefaultLang('en');
      translateService.use('en');
  }
}

  changeLanguage(language: string): void {
    this.translateService.use(language);
  }

<div class="d-flex">
          <div class="flag" (click)="changeLanguage('nl')"><img src="/assets/images/nl.svg"></div>
          <div class="flag" (click)="changeLanguage('en')"><img src="/assets/images/us.svg"></div>
      </div>

Answer 1

我建议使用 Angular i18n 而不是

ngx-translate

。 您可以在此处查看更多信息：讨论：图书馆的未来

Answer 2

这是一个简单但可能不是最好的解决方案。但是如果你想要一个带有 svg 的按钮来选择语言来做到这一点，该怎么办？

组件

constructor(
public translate: TranslateService,
private sharedService: SharedService) {
translate.addLangs(['en', 'nl']);
translate.setDefaultLang('en');
translate.use('en');

const browserLang = translate.getBrowserLang();
translate.use(browserLang?.match(/en|nl/) ? browserLang : 'en');
this.model.lang = translate.currentLang;

}

HTML

  <button
          value="show"
          class="dropdown-item"
          (click)="useLanguage('en')"
        >
          <img src="/assets/images/us.svg" />
        </button>