Ya he implementado ngx-translate con éxito. Ahora, quiero cambiar el href base de mi proyecto Angular, según el idioma que elija en mi menú de encabezado.
Actualmente, mi URL se ve así: "localhost:4200". Luego, cuando inicies el proyecto, debe mostrar algo como esto: "localhost:4200/en" o así: "localhost:4200/es", dependiendo del idioma elegido.
Mi index html tiene esto:
<base href="/"/>Y mi archivo ts de componente de encabezado tiene una función que cambia el idioma usando ngx-translate. Como puede ver, traté de usar 'replaceState' para mostrar el idioma elegido en la URL y funcionó, pero desaparece una vez que navego a otra ruta.
import { Component, OnInit } from '@angular/core'; //For translate language import { TranslateService } from '@ngx-translate/core'; import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router'; import { Location } from '@angular/common'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], }) export class HeaderComponent implements OnInit { constructor(private translate: TranslateService, private router: Router, private location: Location, ) { translate.addLangs(['es','en']); translate.setDefaultLang('es'); } ngOnInit(): void { } useLanguage(language: string): void { this.translate.use(language); // alert(language); // location.replace("https://www.google.com"); // return; const modified_path = language; this.location.replaceState(modified_path); } }Parece que está tratando de lograr algún tipo de enrutamiento usando base href. Usaría base href solo si necesito varias instancias de mi aplicación. Por ejemplo, cada uno de ellos en una subcarpeta.
Tal vez debería probar Angular Router ( https://angular.io/guide/router-reference ) si desea que solo una instancia de la aplicación maneje diferentes idiomas. La idea es tener una ruta en el nivel raíz que represente el idioma y un protector de idioma que asegure que solo se llamen idiomas válidos. Esto se vería algo como esto:
const routes2: Routes = [ { path: ':language', canActivate: [LanguageGuard], children: [ { path: 'home', component: HomeComponent, }, { path: 'some-page', component: SomePageComponent, }, ] }, { path: '**', redirectTo: '/en', }, ];