Transloco -Sprachschalter funktioniert, aber Pipe aktualisiert die URL nicht in Angular ⇐ JavaScript

[Anonymous]

Ich verwende die @JSVERSVER/Transloco Bibliothek in meiner Angularanwendung, um die Sprachübersetzung zu verwalten. Wenn ich die Sprachen mit einer Schaltfläche wechsle, werden die Übersetzungen in der Vorlage korrekt aktualisiert (zum Beispiel "EN -Titel" wird zu "ES -Titel"). Der Link in meiner Vorlage ändert sich jedoch nicht entsprechend nicht. Unten finden Sie den Code für meine Langpipe und die STYNALLANG Methode:

Code: Select all

import { Component, inject, Injectable, isDevMode, Pipe } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
provideTransloco,
Translation,
TranslocoLoader,
TranslocoModule,
TranslocoService,
} from '@jsverse/transloco';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { provideRouter, RouterModule } from '@angular/router';

console.clear();

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
private http = inject(HttpClient);

getTranslation(lang: string) {
return this.http.get(`/assets/i18n/${lang}.json`);
}
}

@Pipe({
name: 'lang',
})
export class LangPipe {
transloco = inject(TranslocoService);

transform(value: string) {
console.log({ value });
return `${this.transloco.getActiveLang()}/${value}`.replace(/\/\//g, '/');
}
}

@Component({
selector: 'app-root',
imports: [TranslocoModule, CommonModule, LangPipe],
template: `
in app!

{{ t('title') }}

switch lang
goto to some link

`,
})
export class App {
name = 'Angular';
transloco = inject(TranslocoService);

switchLang() {
if (this.transloco.getActiveLang() === 'en') {
this.transloco.setActiveLang('es');
} else {
this.transloco.setActiveLang('en');
}
}
}

bootstrapApplication(App, {
providers: [
provideHttpClient(),
provideTransloco({
config: {
availableLangs: ['en', 'es'],
defaultLang: 'en',
reRenderOnLangChange: true,
prodMode: !isDevMode(),
},
loader: TranslocoHttpLoader,
}),
],
});
< /code>
[list]
[*] Die Sprache wechselt erfolgreich in der Vorlage (en

wird zu ES ), aber die URL (generiert durch das Lang pipe) wird nicht mit der neuen Sprache aktualisiert.
[*] Die Pipe verwandelt die URL Wie erwartet, aber es scheint nicht auf die Sprachänderung zu reagieren, wenn sie durch die STITYHLANG -Methode ausgelöst wird. Versucht:

Ich habe überprüft Das Lang -Pipe und es transformiert den Link basierend auf der aktiven Sprache, aber es wird nicht dynamisch aktualisiert, wenn die Sprache geschaltet ist.
[/list]
Wenn Transloco ein besseres hat Integrierte Möglichkeit, dieses Szenario zu bewältigen und die URL basierend auf der aktiven Sprache richtig zu aktualisieren. Ich würde diesen Ansatz anstelle der benutzerdefinierten Rohr gerne verwenden. Richtig, wenn die Sprache geschaltet ist?>