如何在Coreui Angle中为面包屑添加翻译

问题描述

我在我的角度应用程序中使用coreui模板。我在其中添加了@ ngx-translate / core来翻译我的应用程序。我已经完成了所有内容的翻译，但是我无法为CoreUI提供的面包屑添加翻译。

layout.html

<div class="app-body">
  <app-sidebar
    #appSidebar
    [fixed]="true"
    [display]="'lg'"
    [minimized]="sidebarMinimized"
    (minimizedChange)="toggleMinimize($event)"
  >
    <app-sidebar-nav
      [navItems]="navItems"
      [perfectScrollbar]
      [disabled]="appSidebar.minimized"
    ></app-sidebar-nav>
    <app-sidebar-minimizer></app-sidebar-minimizer>
  </app-sidebar>
  <!-- Main content -->
  <main class="main">
    <!-- Breadcrumb -->
    <cui-breadcrumb> </cui-breadcrumb> //breadcrumbs part
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </main>
</div>

路由文件：

const routes: Routes = [
  {
    path: '',data: {
      title: 'Devices',},children: [
      {
        path: '',component: ListComponent,data: {
          title: 'List',{
        path: 'new',component: AddComponent,data: {
          title: 'Add',canDeactivate: [CanDeactivateGuard],{
        path: 'edit/:id',component: EditComponent,data: {
          title: 'Edit',{
        path: ':id',component: DetailComponent,data: {
          title: 'Detail',{
        path: ':id/configuration/add',component: AddTrafficSteeringComponent,data: {
          title: 'Add Configuration',{
        path: ':id/configuration/edit/:configurationId',component: EditTrafficSteeringComponent,data: {
          title: 'Edit Configuration',],];

我想知道如何为面包屑添加翻译

解决方法

我通过复制CoreUI组件并对其稍加修改来解决此问题：

breadcrumb.component.html（注意对翻译键的检查）

<ol class="breadcrumb">
    <ng-container *ngFor="let breadcrumb of breadcrumbs | async,let last = last">
        <li class="breadcrumb-item"
            *ngIf="breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)"
            [ngClass]="{active: last}">
            <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.translate ? (breadcrumb.label.title | translate) : breadcrumb.label.title}}</a>
            <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.translate ? (breadcrumb.label.title | translate) : breadcrumb.label.title}}</span>
        </li>
    </ng-container>
</ol>

breadcrumb.component.ts（不变）

import {Component,ElementRef,Inject,Input,OnDestroy,OnInit,Renderer2} from '@angular/core';
import {DOCUMENT} from '@angular/common';

import {BreadcrumbService} from './breadcrumb.service';

function Replace(el: any): any {
    const nativeElement: HTMLElement = el.nativeElement;
    const parentElement: HTMLElement = nativeElement.parentElement;

    // move all children out of the element
    while (nativeElement.firstChild) {
        parentElement.insertBefore(nativeElement.firstChild,nativeElement);
    }

    // remove the empty element(the host)
    parentElement.removeChild(nativeElement);
}

@Component({
    selector: 'app-custom-breadcrumb',templateUrl: './breadcrumb.component.html',})
export class BreadcrumbComponent implements OnInit,OnDestroy {

    @Input() fixed: boolean;
    breadcrumbs;
    private readonly fixedClass = 'breadcrumb-fixed';

    constructor(
        @Inject(DOCUMENT) private document: any,private renderer: Renderer2,public service: BreadcrumbService,public el: ElementRef
    ) {
    }

    ngOnInit(): void {
        Replace(this.el);
        this.isFixed(this.fixed);
        this.breadcrumbs = this.service.breadcrumbs;
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body,this.fixedClass);
    }

    isFixed(fixed: boolean = this.fixed): void {
        if (fixed) {
            this.renderer.addClass(this.document.body,this.fixedClass);
        }
    }
}

breadcrumb.service.ts（不变）

import { Injectable } from '@angular/core';
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
import { BehaviorSubject,Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class BreadcrumbService {

    breadcrumbs: Observable<Array<any>>;

    private breadcrumbSubject: BehaviorSubject<Array<any>>;

    constructor(private router: Router,private route: ActivatedRoute) {

        this.breadcrumbSubject = new BehaviorSubject<any[]>(new Array<any>());

        this.breadcrumbs = this.breadcrumbSubject.asObservable();

        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
            const breadcrumbs = [];
            let currentRoute = this.route.root;
            let url = '';
            do {
                const childrenRoutes = currentRoute.children;
                currentRoute = null;
                // tslint:disable-next-line:no-shadowed-variable
                childrenRoutes.forEach(route => {
                    if (route.outlet === 'primary') {
                        const routeSnapshot = route.snapshot;
                        url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
                        breadcrumbs.push({
                            label: route.snapshot.data,url
                        });
                        currentRoute = route;
                    }
                });
            } while (currentRoute);

            this.breadcrumbSubject.next(Object.assign([],breadcrumbs));

            return breadcrumbs;
        });
    }
}

像这样使用它：

{
        path: 'new',component: AddComponent,data: {
          title: 'Add',translate: true
        },canDeactivate: [CanDeactivateGuard],},