Angular 9: Как использовать $ localize в маршрутизации - PullRequest
Новая
       39

Angular 9: Как использовать $ localize в маршрутизации

0 голосов
/ 24 февраля 2020

Я использую "@ angular / localize": "^ 9.0.2", и у меня есть маршрут с динамическим заголовком c, который должен быть переведен: 

const routes: Routes = [
  { path: 'overview', component: DashboardPageComponent, data: { title:  $localize`:@@overview:Overview`, breadcrumb: 'Overview' } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

сообщения. es.xlf 

<unit id="overview">
  <segment>
    <source>Overview</source>
    <target>Vista general</target>
  </segment>
</unit>

Но когда я запускаю ng serve --configuration=es, отображается следующая ошибка: 

ERROR in src/app/dashboards/dashboard-routing.module.ts(8,7): Error during template compile of 'DashboardRoutingModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'routes' was referenced
    Consider exporting 'routes'.

Кроме того, я читаю статью: https://blog.ninja-squad.com/2019/12/10/angular-localize/ ищет обходной путь, такой как: 

const routes: Routes = [
  { path: 'overview', component: DashboardPageComponent, data: { title: 'Overview', breadcrumb: 'Overview' } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.scss']
})
export class TitleComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  public title: String = "";

  constructor(    
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.title = this.translate(this.buildTitle(this.activatedRoute.firstChild));
  }

  ngOnInit() {
    this.subscription = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      distinctUntilChanged(),
    ).subscribe(() => {
        this.title = this.buildTitle(this.activatedRoute.firstChild);
    });
  }

  ngOnDestroy() {
    if(this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  buildTitle(route: ActivatedRoute): String {
    return route.routeConfig && route.routeConfig.data ? route.routeConfig.data.title : '';
  }

  translate(title: String): String {
    if(!title || title === '') return title;
    console.log(title);
    switch(title) {
      case 'Overview': return $localize`:@@overview:Overview`;
      // Other cases...
    }
  }
}

Но в этом случае $ localize :@@overview:Overview всегда отображает «Обзор», но не перевод messages.es.xlf, Есть идеи о том, как использовать $ localize для перевода этого заголовка?

...