change url of HttpClient in angular when the language is changed-CodePudding

im trying to make a portfolio where when if someone wants changes the language in the menu the components change what json load for getting all data. I try to use BehaviourSubject and subject but i cant understand them so it difficult to use them. sorry for any mistake in english im learning

this is my service

export class PortfolioService {
  language: string = 'espaniol';

  constructor(private http: HttpClient) {}

  obtenerDatos(): Observable<any> {
    if (this.language === 'espaniol') {
      return this.http.get('./assets/i18n/espaniol.json');
    } else {
      return this.http.get('./assets/i18n/english.json');
    }
  }

  changeLang(value: string) {
    this.language = value;
  }
}

this is my header

export class HeaderComponent {
  @Input() currentSection = 'section1';
  siteLanguage = 'english';
  languageList = [
    { code: 'english', label: 'English' },
    { code: 'espaniol', label: 'Español' },
  ];

  constructor(private portfolioService: PortfolioService) {}

  changeLang(localeCode: string) {
    this.portfolioService.changeLang(localeCode);
  }

  scrollTo(section: string) {
    document.querySelector('#'   section)!.scrollIntoView();
  }
}

my template

    <ng-container *ngFor="let language of languageList">
             

                <li role="menuitem">
                  <a  (click)="changeLang(language.code)">
                    {{ language.label }}
                  </a>
                </li>
              </ng-container>

and my component that load the data

export class HomeComponent {
  constructor(private datosPortfolio: PortfolioService) {}
  miPortfolio: any;

  ngOnInit(): void {
    this.datosPortfolio.obtenerDatos().subscribe((data) => {
      this.miPortfolio = data;
    });
  }
}

i tried to make a portfolio where i could change the language with a service that picked up when a changed happened in the header. the changed get picked up but the language is not changed in other components.

CodePudding user response：

you need to wrap your data source observable with observable that changes when language changes. for that, the best is to use the BehaviorSubject. take a look at this:

export class PortfolioService {
  language = new BehaviorSubject<string>('espaniol');

  constructor(private http: HttpClient) {}

  obtenerDatos(): Observable<any> {
    return this.language.asObservable().pipe(
      switchMap(lang => this.http.get(`./assets/i18n/${lang}.json`))
     )
  }

 changeLang(value: string) {
   // update the value of this BehaviorSubject, and all 
   // subscribers notify about it 
   this.language.next(value);
 }
}

this way every time language changed, new source emit in this.language BehaviorSubject and subscribe function fires again because of the new value, and them switch to other observable that makes the HTTP request with the language as a parameter that goes into the URL of the request.

hope it helps :)