Javascript 语言更改时始终重定向到主页-Angular2和本地化路由器

我正在开发一个Angular2应用程序，它使用ngx translate进行文本翻译，并将路由器本地化，以便将语言附加到路由url

现在，不使用本地化路由器，一切都很好，我可以更改语言（通过下拉按钮）并查看应用的文本翻译

安装localize router后，如果加载主页，我可以看到该语言正确地附加到url。但问题是，当我更改语言时，组件（本地化路由器）将用户重定向到主页（将新的语言名称附加到url），而不是保留到当前页面

因此，在网站加载时，语言被正确附加，如果我尝试导航，url被正确翻译，但是当我在与主页不同的页面上，并且我尝试更改语言时，我会被重定向到附加了新语言的主页

这里是我的文件和配置：

应用程序模块.ts

@NgModule({
imports: [
 TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }
    }),

    RouterModule.forRoot(routes,{useHash: true}),
    LocalizeRouterModule.forRoot(routes),

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]
                },

@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');

应用程序路由.ts

@NgModule({
imports: [
 TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }
    }),

    RouterModule.forRoot(routes,{useHash: true}),
    LocalizeRouterModule.forRoot(routes),

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]
                },

@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');

应用程序组件.ts

@NgModule({
imports: [
 TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }
    }),

    RouterModule.forRoot(routes,{useHash: true}),
    LocalizeRouterModule.forRoot(routes),

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]
                },

@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');

topbar.component.html（我刚刚编写了按钮模板）

使用的软件版本为：

"@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",

我不能从angular2升级到angular4或更高

那我做错了什么

例如，当我在本页中时，为什么：

我改变了重定向到的语言

?

我猜问题是否出在我的路由配置中，如果我打印一个我总是得到的ActivatedRouteSnapshot对象的toString（独立于当前页面）

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

---

将topbar.component.js更改为：

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

这将转换给定的路由，而不是重定向到文档根

/

。并且

this.router.url

返回用户当前所在的当前路径

---

最后，不要忘记将

路由器

添加为topbar组件的依赖项。

尝试坚持使用

本地化路由器

存储库的工作示例和文档。将

changeLanguage（）

函数缩减为：

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

文档

changeLanguage（lang:string，extras？：NavigationExtras，UseNavigationMethod？：boolean）

：将当前url转换为给定语言 并更改应用程序的语言。临时演员将被传给 角度路由器导航方法。userNavigateMethod告诉我们 本地化路由器以使用navigate而不是navigateByUrl方法。对于 德语和路线定义为：lang/users/：user\u name/profile

---

正如我所想的，问题在于路由配置，事实上我创建了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循环

---

在前面的routes配置中，DefaultLayoutComponents的子级似乎为空

“语言变化”是什么样子的？例如，它是一个简单的锚定标记吗？您能提供更改语言的HTML模板吗？您好@MichaelCzechowski，我刚刚更新了问题添加按钮HTML模板已经尝试过了，但什么都没有发生，事实上“this.localizeService.translateRoute”只要返回一个字符串，如果我将其打印到console.log，我会得到：“/ita/ita/dashboard/home”（假设当前页面为“ita/dashboard/home”）因此，它只是返回一个字符串，通过将路由器作为依赖项添加到url中，再次将以前的语言追加到url中。你的意思是注入到构造函数中吗？如果是，这也已经完成。准备好了，也尝试了这一点，但仍然得到了相同的效果，因此我被重定向到主页，并将新选择的语言追加到url中：-(