时间戳

首页 > 解决方案 > 我不能在 AppRoutingModule 中使用 TranslateService 吗？

angular - 我不能在 AppRoutingModule 中使用 TranslateService 吗？

问题描述

所以我使用了一个自动面包屑模块​​，我需要用我的 TranslateService 翻译标题，当我声明 Routes 的 const 时使用它的方法是什么。

这是我的 AppRoutingModule

import { NgModule, Injector } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Components ========================================
import { HomeComponent } from './pages/home/home.component';
import { AltaRepresentacioComponent } from './pages/representacio/alta-representacio/alta-representacio.component';
import { ConfirmacioAltaComponent } from './pages/representacio/alta-representacio/confirmacio-alta.component';
import { ConsultaRepresentacioComponent } from './pages/representacio/consulta-representacio/consulta-representacio.component';
import { ConsultaAplicacioComponent } from './pages/aplicacio/consulta-aplicacio/consulta-aplicacio.component';
import { PermisosComponent } from "./pages/permisos/permisos.component";
import { ErrorPageComponent } from "./shared/error/error-page.component";
import { TranslateService} from '@ngx-translate/core';

const routes: Routes = [
  { path: '*', redirectTo: '' },
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'representacio',
    children: [
      {
        path: 'alta',
        children: [
          {
            path: '',
            component: AltaRepresentacioComponent
          },
          {
            path: 'confirmacio',
            component: ConfirmacioAltaComponent,
            data: {
              breadcrumb: 'Confirmació de Representació'
            }
          }
        ],
        data: {
          breadcrumb: 'Alta de Representació'
        }
      },
      {
        path: 'consulta',
        component: ConsultaRepresentacioComponent,
        data: {
          breadcrumb: 'Consulta Representacions'
        }
      }
    ]
  },
  {
    path: 'permisos',
    component: PermisosComponent,
    data: {
      breadcrumb: 'Permisos'
    }

  },
  {
    path: 'error',
    component: ErrorPageComponent,
    data: {
      breadcrumb: 'ErrorPage'
    }
  }
];

@NgModule({
  // imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

这是我使用面包屑（HTML）的地方：

<div class="col-12 no-left-padd">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li *ngFor="let breadcrumb of breadcrumbs; let last = last;" class="breadcrumb-item">
                  <span *ngIf="!last">
                    <a routerLink="{{breadcrumb.url}}">
                      {{ breadcrumb.label }}
                    </a>
                  </span>
                  <span *ngIf="last"> {{ breadcrumb.label }} </span>
                </li>
                <!-- <li class="breadcrumb-item active" aria-current="page">Consulta representació</li> -->
              </ol>
            </nav>
          </div>

我用ActivatedRoute更改面包屑的代码段：

ngOnInit() {
        let breadcrumb: BreadCrumb = {
            label: this.translate.instant('breadcrumb.inici'),
            url: ''
        };

        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
            //set breadcrumbs
            let root: ActivatedRoute = this.route.root;
            this.breadcrumbs = this.getBreadcrumbs(root);
            this.breadcrumbs = [breadcrumb, ...this.breadcrumbs];

        });
    }

我尝试了几种方法，但我对 angular 和 Typescript 真的很陌生，所以我不太了解注入服务和类似的东西是如何工作的，所以如果你能帮助我找到解决它的方法。因为我知道使用 TranslateService 的唯一方法是在构造函数中声明它，但是我不能使用它来创建路由 const。

标签： angularangular5

解决方案

您可以将 i18n 键提供给面包屑：

data: {
  breadcrumb: 'foo.bar.xyz'
}

然后，在模板中，您可以使用TranslatePipeof @ngx/translate：

<a routerLink="{{breadcrumb.url}}">
  {{ breadcrumb.i18nKey | translate }}
</a>

推荐阅读