angular 中用户从语言栏更改语言时如何更改下拉值
how to change Dropdown values when user change language from language bar in angular
我在数据库中有一个 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 应该自动显示
你能帮我吗朋友们
谢谢
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 评论下您的疑问,如果有的话会尽力帮助解决。如果答案能解决您的问题,请考虑接受它。
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;
我在数据库中有一个 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 应该自动显示
你能帮我吗朋友们 谢谢
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 评论下您的疑问,如果有的话会尽力帮助解决。如果答案能解决您的问题,请考虑接受它。
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;