如何解决如何在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],},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。