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


*/

在breadcrumb angular 5中翻译

2 个答案: