如何创建角度的多语言路由路径 编辑

编程问答 2022-06-08

问题描述

我正在使用ngx-translate库向我的延迟加载的Angular网站添加多语言支持。
我想知道如何在角度路由系统中正确添加多语言逻辑。

示例

// HOME is my exported variable containing my routes
export const routes: Routes = [{
 path: HOME,loadChildren: () => import('app/pages/home.module').then((m) => m.HomeModule),}]

现在，当用户访问我的网站时，他应该找到带有这些URL的主页

  • 英语：my-domain/home
  • 法语：my-domain/acceuil
  • 德语：my-domain/startseite

我知道，我可以创建多个app-routing.module.ts文件，每种语言一个，但是当网站有很多页面并且需要翻译成多种语言时，使用此技术会变得非常复杂。

编辑

另一个想法是重新加载页面，即使通过此解决方案，我也必须更改url，这在嵌套路由系统中也很复杂。就像：

  • 英语：my-domain/en/products/my-product
  • 法语：my-domain/fr/produits/mon-produit

解决方法

我猜HOME是一个常数。

如果您创建一个配置对象，该对象在更改语言时会初始化/更新，并且仅更改值，该怎么办？例如：

const PATHS = {
  en: {
    home: 'home',},fr: {
    home: 'acceuil',it: {
    home: 'inizio',}
}

然后您只需用PATHS[language].home代替HOME，语言就是该语言设置的语言，它甚至可能是配置对象的另一个属性。

config = {
  currentLanguage: 'en',paths: {},}

只要所有人都可以使用，就可以了（创建根config.ts对象，导出这些变量，并在需要的地方进行修改）

export const routes: Routes = [{
 path: config.path[config.currentLanguage].home,loadChildren: () => import('app/pages/home.module').then((m) => m.HomeModule),}]

您甚至可以通过创建一个函数/生成器来使其变得更加专业化，该函数/生成器将检索您特别想要的内容，但这对于本示例来说有点过多了

,

首先，这是工作代码的堆叠

此答案中提出的所有想法都在下面的代码段（stackblitz）中进行了编译：

https://stackblitz.com/edit/angular-ivy-bys583

关于无需刷新的更改路线

要在不刷新页面的情况下更改路由，可以访问route.config中的路由列表，并更改所需路由的属性path。

仅显示其工作原理，请参见下面的简单示例，其中路由/home更改为/accueil，无需刷新应用程序：

import { Router } from '@angular/router';

export class AppComponent {

  constructor(private router: Router){}

  changeHomeRoute(){
    for (let route of this.router.config){
      if (route.path == 'home'){
        route.path = 'accueil';
      }
    }
  }
}

在localStorage中存储语言并在应用程序启动时设置默认路由

让我们在一个简单的应用程序上工作，该应用程序支持三种语言（en，fr和de）和仅一个组件（HomeComponent）。

首先，如OP所建议，一个选项是将语言存储在{​​{1}}中。

路线的路径可以这样存储在const中：

route-paths.ts 

localStorage

在应用程序首次加载期间，路由可以这样配置：

app-routing.module.ts 

export const DEFAULT_LANGUAGE = "en";

export const ROUTE_PATHS = {
    de: {
        home: 'startseite'
    },en: {
        home: 'home'
    },fr: {
        home: 'accueil'
    }
};

更改语言会触发应用程序import { DEFAULT_LANGUAGE,ROUTE_PATHS } from './route-paths'; const routes: Routes = [ { path: localStorage.getItem('lang') ? ROUTE_PATHS[localStorage.getItem('lang')]['home'] : ROUTE_PATHS[DEFAULT_LANGUAGE]['home'],component: HomeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)],exports: [RouterModule] }) export class AppRoutingModule { } 和routes中的更新

在下面的代码中，您可以看到示例

  • 更改menu中的语言并相应地更新路由（请参见方法<select>，该方法使用onChangeLang()来更改路由）。
  • 更改路线后自动更新菜单链接（请参见route.config[i].path和ngFor方法）。

app.component.html 

routes()

app.component.ts 

<div>
  Language:
  <select (change)="onChangeLang($event)">
    <option *ngFor="let lang of languagesAvailable" [value]="lang" [selected]="langSelected == lang">{{lang}}</option>
  </select>

  <div>
    <span>Menu:</span>
    <a *ngFor="let route of routes() | keyvalue" [routerLink]="['/' + route.value]">
      {{route.value}} 
    </a>
  </div>
</div>

<router-outlet></router-outlet>
angularangular2-routing