Estoy tratando de vincular una variable de TypeScript al servicio de traducción al igual que vincular en el marcado HTML, que funciona bien.
Esto es lo que he intentado hasta ahora
ngOnInit() { this.customTranslateService.get("mainLayout.userProfileDropdown.changeLocale").subscribe((result) => { this.changeLocaleText = result; }) this.customTranslateService.translateService.onLangChange.subscribe((event: LangChangeEvent) => { this.changeLocaleText = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale"); }); this.userProfileMenuOptions = [ { text: this.changeLocaleText, itemId: "LocaleSelect" }, { text: "Report a bug", itemId: "BugReport" }, { text: "Request a feature", itemId: "FeatureRequest" }, { text: "Log Out", itemId: "LogOut" } ]; }
customTranslateService
es solo un servicio que envuelve TranslateService
.
La primera suscripción funciona bien, pero cuando cambio de idioma, onLangChange
se activa y cambia el contenido de la variable correctamente, pero la referencia de userProfileMenuOptions
a changeLocaleText
no está vinculada, por lo tanto, no se actualiza.
El uso de un BehaviorSubject
realmente no se puede hacer aquí, ya que es un código mecanografiado, no un marcado html que puede usar la tubería async
.
Tal vez recrear la matriz userProfileMenuOptions
cada vez que se llama a la suscripción de cambio de idioma podría ser una opción, aunque no estoy seguro de que le guste al componente que usa la matriz.
PD: instant
funcionará aquí porque tengo un cargador de aplicaciones que carga todos los idiomas disponibles antes de que la aplicación esté disponible para el usuario.
Algunas ideas ?
ngOnInit() { this.customTranslateService.get("mainLayout.userProfileDropdown.changeLocale").subscribe((result) => { this.changeLocaleText = result; }) const getUserPorfileMenuOptions = (changeLocaleText: string) => { return [ { text: this.changeLocaleText, itemId: "LocaleSelect" }, { text: "Report a bug", itemId: "BugReport" }, { text: "Request a feature", itemId: "FeatureRequest" }, { text: "Log Out", itemId: "LogOut" } ]; } this.customTranslateService.translateService.onLangChange.subscribe((event: LangChangeEvent) => { this.changeLocaleText = this.customTranslateService.instant("mainLayout.userProfileDropdown.changeLocale"); this.userProfileMenuOptions = getUserPorfileMenuOptions(this.changeLocaleText); }); this.userProfileMenuOptions = getUserPorfileMenuOptions(this.changeLocaleText); }