Angular 路由：是否可以针对不同的语言使用不同的“路径”字符串？

Question

我正在做一个 i18n Angular 应用程序，到目前为止效果很好。

但是，我对不同语言有相同的路由字符串，这对于 SEO 来说并不是最好的。

每种语言的路由数组的“路径”属性是否可以不同？

例如：

const appRoutesEN: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '**', component: PageNotFoundComponent }
];

是否还可以定义

appRoutesFR: Routes

如果可以的话我该如何使用它？ 我应该将

LOCALE_ID

注入路由模块吗？如果是的话怎么办？

Answer 1

如果您在评论中描述的每种语言需要不同的路由，您可以为每种语言提供一个专用路由模块。然后在 angular-cli.json 中为每种语言定义一个专用应用程序，具有自己的 main.ts 和 AppModule，仅拉入特定语言所需的路由模块。

  "apps": [
   {
      "root": "src",
      "name": "yourapp_FR",
...
      "main": "./app/yourapp_FR/main.ts",
...   
    },
   {
      "root": "src",
      "name": "yourapp_DE",
...
      "main": "./app/yourapp_DE/main.ts",
...   
    }
    ]

然后，您可以为每种语言构建应用程序，如下所示：

ng build --app yourapp_FR --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot

这样您设置一次就可以每次构建而无需注释任何内容。 我没有完整的背景。你说每种语言都有路由对于 SEO 更好。我不明白这一点，但如果你这么说，好吧。但是我不喜欢每种语言的专用路由。这意味着大量的冗余和更多的维护。

Answer 2

目前似乎没有简单的解决方案。如果找到的话我会更新。

Angular i18n 人员正在努力集成代码级国际化，也许到那时。

我能想到的最佳解决方案是更改代码中的路由模块和模板中的

routerLink

属性以及代码其他部分中每种语言的所有链接，然后分别为每种语言构建应用程序。

一点也不理想。

更新

按照@estus的推荐，我已经尝试过Greentube/localize-router。

我不高兴安装像

@ngx-translate/core

和

@ngx-translate/http-loader

这样的依赖项，因为我使用的是 Angular i18n 实现/工具而不是 ngx-translate。

它会一直工作，直到它遇到带有子路由的延迟加载模块。

因此，如果您没有任何带有子级的延迟加载模块，那么

localize-router

就是正确的选择。

更新

最新版本的 localize-router 现在支持延迟加载模块。

一旦程序翻译到达，将支持 Angular i18n。

Answer 3

如果您已经在使用 @ngx-translate/core 之类的东西，那么您可以创建自己的映射，而不是添加更多外部库。

示例：

function generateI18nRoutes(
    elements: Array<{ i18nPaths: string[]; component: any; data: object; canActivate?: 
[] }>
): Routes {
    return elements.reduce(
        (accumulator, currentValue) => [
            ...accumulator,
            ...currentValue.i18nPaths.map((path: string) => ({
                path,
                component: currentValue.component,
                data: currentValue.data,
                canActivate: currentValue.canActivate
            }))
        ],
        []
    );
}

然后像这样使用它：

const routes: Routes = [
    {
        path: "admin",
        component: AdminLayoutComponent,
        canActivate: [AdminAuthGuard],
        children: generateI18nRoutes([{ i18nPaths: [""], component: HomeComponent, data: { title: "ADMIN" } }])
    },
    {
        path: "",
        component: GeneralLayoutComponent,
        children: generateI18nRoutes([
            { i18nPaths: [""], component: HomeComponent, data: { title: "HOME" } },
            {
                i18nPaths: ["sign-in", "iniciar-sesión", "iniciar-sessão"],
                component: SignInComponent,
                data: { title: "SIGN_IN" }
            }
        ])
    },
    {
        path: "**",
        component: PageNotFoundComponent,
        data: { title: "PAGE_NOT_FOUND" }
    }
];

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

Answer 4

您可以按照

官方文档

进行设置来使用@angular/localize。如果您有正确的设置，您可以在路线定义中使用

$localize

（不需要其他路线定义）：

const appRoutes: Routes = [
  { path: $localize`crisis-center`, component: CrisisListComponent },
  { path: $localize`hero/:id`,      component: HeroDetailComponent },
  {
    path: $localize`heroes`,
    component: HeroListComponent,
    data: { title: $localize`Heroes List` }
  },
  { path: '**', component: PageNotFoundComponent }
];

通过生成翻译文件，您将获得以您的原文为来源的 XLF 格式文件。

ng extract-i18n --output-file messages.fr.xlf

向其中添加目标将在更改您的语言环境时注入翻译。

<trans-unit id="****" datatype="html">
    <source>crisis-center</source>
    <target>centre-de-crise</target>
    ...
</trans-unit>

您可以在

angular.json

中更改构建级别的区域设置，以测试它是否按预期工作。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "localize": ["fr-FR"],
      ...
    }
  }
}