面包屑中的翻译 angular 5

Question

我有以下路线，想为面包屑标签添加翻译。

const appRoutes: Routes = [
{ path: 'crisis-center', data: {breadcrumb: 'crisis center'}, component: CrisisListComponent },
{ path: 'hero/:id',     data: {breadcrumb: 'hero'}, component: HeroDetailComponent },
{
  path: 'heroes',
  component: HeroListComponent,
  data: { breadcrumb: 'Heroes List' }
},
{ path: '',
  redirectTo: '/heroes',
  data: {breadcrumb: 'Heros'},
  pathMatch: 'full'
},
{ path: '**',       data: {breadcrumb: 'Page not found'}, component: PageNotFoundComponent }
];

我四处寻找，没有找到任何东西。我想我可能可以使用 i18n en.json 文件，但所有示例都是模板。有没有办法将面包屑翻译成其他语言？

Answer 1

您可以使用 ngx-translate/core。只需导入它，定义 en.json 文件，然后在你的面包屑组件中，你可以通过注入

来完成

constructor(private translate: TranslateService) {}

并在你的组件中翻译它（注意它是同步方法，你可以在清晰的文档中查看如何使其异步）：

this.translate.instant(breadcrumbTitle)

或在这样的模板中：

<span>{{ breadcrumbTitle | translate }}</span>

Answer 2

//Angular 7+ Breadcrumb Component – pp-breadcrumbs translate with @ngx-translat
// in app-routing.module:
/*
const routes: Routes = [
  {
    
path: 'cr', loadChildren: () => import('./cr/cr.module').then(m => m.CrModule), data: { breadcrumbs: 'Request' }
  }]

//in app.component:

this.breadcrumbsService.postProcess = (breadcrumbs: Breadcrumb[]) => {
      breadcrumbs.map(b => {
        b.text = translate.instant('breadcrumbs.' + b.text)
      })
      breadcrumbs.unshift({ text: translate.instant('breadcrumbs.home'), path: '/' });
      return breadcrumbs;
    };
//in he.json :
 "breadcrumbs": {
    "home": "בית",
    "Request": "בקשות"
  }


*/

面包屑中的翻译 angular 5

translation in breadcrumb angular 5

breadcrumbs

angular-ui-router

angular-i18n

angular

angular5