在每个途径中自动添加语言ID

Question

我有一个大型的Angular应用，有50多个页面。我使用ngx translate来支持多语言。

我的app.module.ts看起来类似于这样。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { HeaderComponent } from './header/header.component';
import { AboutpageComponent } from './aboutpage/aboutpage.component';
import { ProductspageComponent } from './productspage/productspage.component';
import { SigninpageComponent } from './signinpage/signinpage.component';

const routes: Routes = [

  {path:'',component:HomepageComponent},
  {path:'about',component:AboutpageComponent},
  {path:'products',component:ProductspageComponent},
  {path:'signin',component:SigninpageComponent},

   ];

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    HeaderComponent
    AboutpageComponent,
    ProductpageComponent,
    SigninpageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
}),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http,'./assets/i18n/', '.json');
}

我的app.component.html是这样的。

<router-outlet></router-outlet>

我想实现的是，我想让每条路由都有语言id作为参数，而不需要改变每个组件的ts文件中html和router navigate中所有的routerLinks。

Answer 1

实现一个canactivate route guard，并在所有的路由中使用它。