Как использовать панировочные сухари с локализацией в angular? - PullRequest
Новая
       54

Как использовать панировочные сухари с локализацией в angular?

0 голосов
/ 18 июня 2020

Я использовал панировочные сухари в angular. Но если придет локализация, как ее реализовать? В модулях маршрутизации я упомянул данные хлебных крошек, но для локализации как я могу добавить соответствующие языковые данные?

app-routing.module.ts 

const routes: Routes = [
 { path: '', redirectTo: '/documents', pathMatch: 'full' },

{
path: 'documents',
component: DocumentManagementComponent,
data: { breadcrumb: 'Documents' },
},

{
path: 'products',
component: ProductsComponent,
data: { breadcrumb: 'Products' },
},
]

Breadcrumb.component. html

  <span *ngFor="let item of breadcrumbs" class="desk">
    <span class="disp-flex">
    <ng-container><a class="level-1" [ngClass] = "item.child ? 'null': levelClass()" [routerLink]="item.url" >{{item.label}}</a></ng-container>
    <ng-container *ngIf="item.child">
      <ng-container *ngFor="let child of item.child">
          <span class="breadcrumb-separator">
              <mat-icon>keyboard_arrow_right</mat-icon>
          </span>
          <ng-container><a class="level-2" [ngClass] = levelClass() [routerLink]="child.url"> {{child.breadcrumb}}</a></ng-container>
       </ng-container>
    </ng-container>
  </span>
  </span>

Breadcrumb.component.ts 

  ngOnint() {
   this.breadcrumbs = [];
   this.router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .pipe(map(() => this.activatedRoute))
  .pipe(
    map(route => {
      while (route.firstChild) {
        route = route.firstChild;
      }
      return route;
    })
  )
  .pipe(filter(route => route.outlet === PRIMARY_OUTLET))
  .subscribe(route => {
    let snapshot = this.router.routerState.snapshot;
    this.breadcrumbs = [];
    let url = snapshot.url;
    let routeData = route.snapshot.data;

    this.label = routeData['breadcrumb'];
    let params = snapshot.root.params;
    let child = routeData['child'];

    this.breadcrumbs.push({
      url: url,
      label: this.label,
      params: params,
      child: child
    });
  });

}

...