json 当语言改变时,改变Angular 中的HttpClient的url

4sup72z8  于 2023-02-01  发布在  Angular
关注(0)|答案(1)|浏览(104)

我试图做一个投资组合,当有人想改变语言在菜单中的组件改变什么json加载获取所有数据。我试图使用行为主题和主题,但我不能理解他们,所以很难使用他们。对不起,在英语我学习的任何错误
这是我的服务

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;
  }
}

这是我的标题

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();
  }
}

我的模板

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

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

和加载数据的组件

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

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

我试着做一个文件夹,在那里我可以用一个服务来改变语言,当标题中发生改变时,这个服务会被拾取。改变被拾取,但是语言在其他组件中没有改变。

hmtdttj4

hmtdttj41#

你需要 Package 你的数据源observable with observable that changes when language changes.为此,最好是使用BehaviorSubject .看看这个:

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.language BehaviorSubject中发出,并且订阅函数由于新值而再次激发,并且它们切换到其他可观察对象,该可观察对象使得HTTP请求以语言作为进入请求的URL的参数。
希望对你有帮助:)

相关问题