angular 中用户从语言栏更改语言时如何更改下拉值

Question

我在数据库中有一个 table 有两列 1.EnglishName 2.PersianName 我通过网络 return 这两列 api 并将其用于我的 angular 项目

在 angular 项目中我使用 ngx-translate 两种语言 1.English 2.Persian

现在我想在用户 select 语言栏中的一种语言时将数据动态加载到下拉列表。例如当用户使用英语时，下拉值应该从 api 获取我的 EnglishName 列数据当用户 select 波斯语时，下拉值应该从 api.

获取我的 PersianName 列数据

app.component.ts:

import { navItemsDari } from '../../_nav';
import { TranslateService } from '@ngx-translate/core';
import { Router } from '@angular/router';
@Component({
  
  selector: 'app-dashboard,',
  templateUrl: './default-layout.component.html',
 
})
export class DefaultLayoutComponent {
  //public sidebarMinimized = false;
  public navItems = navItems;
  langChanged:boolean;
    
  ngOnInit(): void {
    this.switchLang('English')
  }

  constructor(public _router: Router,public translate: TranslateService) {
    
    translate.addLangs(['English', 'دری']);
    translate.setDefaultLang('English');
  }
  switchLang(lang: string) {
    this.translate.use(lang).sunscribe((res)=>{
this.langChanged=true;
});
   
  }
  onLogout() {
    localStorage.removeItem('token');
    this._router.navigate(['/login']);
  }
  // toggleMinimize(e) {
  //   this.sidebarMinimized = e;
  // }
}

app.component.html

<span class="form-inline" id="language">
    <select class="form-control" #selectedLang (change)="switchLang(selectedLang.value)">
      <option *ngFor="let language of translate.getLangs()" [value]="language"
        [selected]="language === translate.currentLang">
        {{ language }}
      </option>
    </select>
  </span>

child.component.ts:

export class SubCategoryComponent implements OnInit {
  public showHideName:boolean = false;
  currentLang:boolean;
 constructor(private service: AdminServiceService,
  private toastr: ToastrService,private translate:TranslateService) {  
 
  }

ngOnInit(): void {
if(this.langChanged){
 if(this.translate.currentLang==='persian'){
  this.showHideName=true;
 }
 else if(this.translate.currentLang==='English'){
    this.showHideName=false;
 } 
}
}

child component.html

<div class="form-group" *ngIf="showHideName">
            <div class="form-group">
                <label>Select Main Category</label>
                <select   name="name"  #name="ngModel" [(ngModel)]="service.formData.name" class="form-control"    style="font-weight:bold;" >         
                    <option *ngFor="let pd of list" value="{{pd.id}}" >{{pd.name}}</option>
                  </select>
              </div>
          </div>
<SubCategoryComponent [langChanged]="langChanged"></SubCategoryComponent>

我想通过更改语言来显示和隐藏div 如果用户 select English from language bar 应该隐藏 div 如果语言栏中的用户 Select 波斯语 div 应该自动显示

你能帮我吗朋友们谢谢

Answer 1

app.component.html

<div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="changeLang(lang)">{{ lang }}</option>
    </select>
  </label>
</div>

app.component.ts:

//调用你的 api 并将值更新为 lang

更改语言（语言）{

lang === this.translate.currentLang;

}

ref: https://stackblitz.com/edit/ngx-translate-example-nqx7wv 评论下您的疑问，如果有的话会尽力帮助解决。如果答案能解决您的问题，请考虑接受它。

Answer 2

translate.use 是一个可观察对象，因此您需要订阅它，然后在它完成后将一些标志传递给语言已更改的子组件，然后执行您的逻辑。

switchLang(lang: string) {
    this.translate.use(lang).subscribe((res)=>{
        this.langChanged = true;
    });
  }

使用 langChanged 作为子组件的输入

<SubCategoryComponent [langChanged]="langChanged"></SubCategoryComponent>

child.component.ts:

@Input() langChanged: boolean;

ngOnChanges(): void {
           if(langChanged){
              if(this.translate.currentLang === 'Persian'){
                 this.showHideName=true;
              }
           else if(this.translate.currentLang === 'English'){
               this.showHideName=false;
           }
        }
     }

应用程序。零件。 ts

langChanged:boolean;

angular 中用户从语言栏更改语言时如何更改下拉值

how to change Dropdown values when user change language from language bar in angular

angular

asp.net-core-webapi

typescript2.0

postgresql-9.4