typescript 总是重定向至主页语言变化- Angular2 with Localize-Router

wz3gfoph  于 2023-01-31  发布在  TypeScript
关注(0)|答案(3)|浏览(82)

我正在开发一个Angular2应用程序,它使用ngx-translate进行文本翻译和本地化路由器,以便将语言附加到路由URL。
现在,不使用本地化路由器,一切都很好,我可以改变语言(通过下拉按钮),并看到文本翻译应用。
安装了localize-router之后,如果我加载主页,我可以看到语言被正确地附加到URL上,但问题是当我更改语言时,组件(localize-router)会将用户重定向到主页(新的语言名称附加到URL上),而不是停留在当前页面。
因此,在网站加载的语言是正确的附加,如果我试图导航,网址是正确的翻译,但当我在一个页面上不同的主页,我试图改变语言,我被重定向到主页与新的语言附加。
这里有我的文件和配置:

    • 应用程序模块. ts**
@NgModule({
imports: [
 TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }
    }),
    
    RouterModule.forRoot(routes,{useHash: true}),
    LocalizeRouterModule.forRoot(routes),
    • 应用程序路径. ts**
const appRoutes: Routes = [
{

    path: '', 
    component: DefaultLayoutComponent,
    children: [
        {
            path: '',
            component: HomeComponent,
            pathMatch: 'full'
        },
        {
            path: 'error',
            component: ErrorComponent
        },
        {
            path: 'dashboard',
            children: [
                {
                    path: 'home',
                    component: DashboardComponent,
                    canActivate: [AuthGuard]
                },
    • 应用程序组件. ts**
@Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>',    
moduleId: module.id,
})

 export class AppComponent implements OnInit {

constructor(
    private translate: TranslateService,
    public router: Router,
   
) {
   
    this.translate.addLangs(['ita', 'eng']);
    this.translate.setDefaultLang('ita');
    this.translate.use('ita');
    • 默认布局组件. html**
... my html common section ...
<router-outlet></router-outlet>
... the remaining common html section ...
    • topbar. component. ts**它处理菜单栏,当我点击下拉菜单时,调用以下函数(在topbar组件内):
changeLanguage(lang: string){
  this.translate.use(lang);
  this.localizeService.changeLanguage(lang);
    • topbar. component. html**(我刚刚编写了按钮模板)
<button (click)="changeLanguage('ita')">ITA</button>
<button (click)="changeLanguage('eng')">ENG</button>
    • 文件夹结构**
- app
  - app.module.ts
  - app.component.ts
  - other "main" stuff
  - components
    - defaultLayout
      - defaultLayoutComponent.ts
      - defaultLayoutComponent.html
    - other components

所用软件版本为:

"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1",
"@angular/compiler-cli": "~2.4.1",
"@angular/core": "~2.4.1",
"@angular/forms": "~2.4.1",
"@angular/http": "~2.4.1",
"@angular/platform-browser": "~2.4.1",
"@angular/platform-browser-dynamic": "~2.4.1",
"@angular/platform-server": "~2.4.1",
"@angular/router": "~3.2.3",
"@angular/upgrade": "~2.4.1",   
"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "^0.1.0",
"localize-router": "^0.7.1",

我无法从Angular 2升级到Angular 4或更高。
我做错了什么?
为什么当我例如在这个页面:
网址:http://mywebsite/#/ita/login
并且我更改了重定向到的语言
http://mywebsite/#/中文?
我猜问题可能出在我的路由配置中,如果我打印ActivatedRouteSnapshot对象的toString(独立于当前页面),我总是得到

Route(url:'', path:'')
jgovgodb

jgovgodb1#

顶栏.组件.js更改为:

changeLanguage(lang: string){
  this.translate.use(lang);
  this.localizeService.translateRoute(this.router.url);
}

这将转换给定的路径,而不是重定向到文档根/,并且this.router.url返回当前路径,即用户当前所在的位置。

  • 最后,不要忘记将router作为依赖项添加到topbar组件中。*
ih99xse1

ih99xse12#

尽量使用localize-router仓库的工作示例和文档,将changeLanguage()函数简化为:

changeLanguage(lang: string){
  this.localizeService.changeLanguage(lang);
}

文件

changeLanguage(lang: string, extras?: NavigationExtras, useNavigateMethod?: boolean):将当前url转换为给定语言并更改应用程序的语言。额外内容将传递给Angular Router导航方法。userNavigateMethod告知localize-router使用navigate而不是navigateByUrl方法。对于德语和定义为:lang/users/:user_name/profile的路由
来源

busg9geu

busg9geu3#

正如我所想的,问题出在路由配置上,事实上我创建DefaultLayoutComponents只是为了让所有页面都有一个共同的布局。
解决方案是删除DefaultLayoutComponent,将所有视图代码移动到app.component.html中,并修改路由配置,删除DefaultLayoutComponent的级别,方法如下:

const appRoutes: Routes = [
{
    {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
    },
    {
        path: 'error',
        component: ErrorComponent
    },
    {
        path: 'dashboard',
        children: [
            {
                path: 'home',
                component: DashboardComponent,
                canActivate: [AuthGuard]
            },

因为本地化路由在路由的子路由上使用ActivatedRouteSnapshot循环。
使用以前的管线配置,DefaultLayoutComponents的子级似乎为空。

相关问题