如何在coreui angular中为面包屑添加翻译

Question

我正在为我的angular应用程序使用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',
},
canDeactivate: [CanDeactivateGuard],
},
{
path: ':id',
component: DetailComponent,
data: {
title: 'Detail',
},
},
{
path: ':id/configuration/add',
component: AddTrafficSteeringComponent,
data: {
title: 'Add Configuration',
},
canDeactivate: [CanDeactivateGuard],
},
{
path: ':id/configuration/edit/:configurationId',
component: EditTrafficSteeringComponent,
data: {
title: 'Edit Configuration',
},
canDeactivate: [CanDeactivateGuard],
},
],
},
];

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

Answer 1

我通过复制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],
},