1

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

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文件，但模板的所有示例。有没有办法将面包屑翻译成其他语言？

4

2 回答 2

0 
//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": "בקשות"
  }


*/
于 2020-11-13T06:55:01.397 回答
0

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

constructor(private translate: TranslateService) {}

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

this.translate.instant(breadcrumbTitle)

或在这样的模板中：

<span>{{ breadcrumbTitle | translate }}</span>
于 2018-03-28T15:42:42.593 回答