I'm currently working on a component that I navigate to, which means it doesn't have a parent or child. The language in this component is changed using the TranslateService, and this service is called from my app.component, which acts as the base of the application. The issue I'm facing is that when I change the language, I need to make a new call to get the document in the updated language from the backend.
One constraint is that I cannot use ngOnChanges because there is no @Input(), and modifying the backend is not an option as it is part of a legacy application that is also used by another application.
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private translateService: TranslateService) {
}
public changeLanguage(language) {
this.translateService.use(language);
this.translateService.setDefaultLang(language);
}
}
Disclaimer
@Component({
selector: 'app-disclaimer',
templateUrl: 'vastgeklikteRechten.component.html',
styleUrls: ['vastgeklikteRechten.component.scss']
})
export class VastgeklikteRechtenComponent {
@ViewChild('dataContainer') dataContainer: ElementRef;
text = '';
constructor(
private translateService: TranslateService,
private vastgeklikteRechtenService: VastgeklikteRechtenService
) {
this.vastgeklikteRechtenService.getVastgeklikteRechten(
this.getLanguage()).subscribe(text => {
this.text = text;
this.loadData(text);
});
}
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
getLanguage() {
return this.translateService.getDefaultLang();
}
}