我正在实现一个语言切换组件,该组件显示复选框,每个复选框代表应用程序的每种语言(带有@ngx-translate
的翻译(。
单击其中一个复选框时,应用程序语言已正确切换,但单击的 mat-复选框仍未选中。
模板:
<mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage == 'de'" (click)="switchLanguage('de')">German</mat-checkbox>
元件:
export class CheckboxOverviewExample {
public selectedLanguage: string;
constructor(){
this.selectedLanguage = 'fr';
}
public switchLanguage(lang: string) {
this.selectedLanguage = lang;
// this.translateService.use(lang); // changing ngx-translate language
console.log('Switched to ' + lang);
}
}
路由到组件时,[checked]
绑定正在工作。登陆组件时确实会检查法语的mat-checkbox
(默认值(。现在,当我单击德语或英语时,语言确实会切换,法语复选框会正确取消选中,但是单击的复选框不会选中。
我错过了一些东西,可能是一个小细节,但我不明白为什么德语/英语不检查而法语正确取消检查。
看看这个简单的堆栈闪电战代码来重现我的情况。
所以我有一个答案给你。 不需要使用单选按钮,因为您的设计师讨厌它只是使用
<mat-checkbox [checked]="selectedLanguage === 'en'" (change)="switchLanguage('en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage === 'fr'" (change)="switchLanguage('fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage ==='de'" (change)="switchLanguage('de')">German</mat-checkbox>
也使用selectedLanguage === 'en'
检查类型和值
此外,使用(change)="switchLanguage('de')
而不是单击
在这里工作或者检查这个
使用 (change)
而不是 (click)
。您的模板应更改为以下内容:
<mat-checkbox [checked]="selectedLanguage === 'en'" (change)="switchLanguage($event, 'en')">English</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage === 'fr'" (change)="switchLanguage($event, 'fr')">French</mat-checkbox>
<mat-checkbox [checked]="selectedLanguage === 'de'" (change)="switchLanguage($event, 'de')">German</mat-checkbox>
。你的函数将如下所示:
public switchLanguage(event: MatCheckboxChange, lang: string) {
if(event.checked && this.selectedLanguage!== lang){
this.selectedLanguage = lang;
// this.translateService.use(lang); // changing ngx-translate language
console.log('Switched to ' + lang);
}
}
记得导入MatCheckboxChange
import { MatCheckboxChange} from '@angular/material';`
链接到演示。
对于此行为,应使用单选按钮。当您只需要允许单个选项选择时,复选框不是正确的方法。
<mat-radio-group [value]="selectedLanguage">
<mat-radio-button value="en" (click)="switchLanguage('en')">English</mat-radio-button>
<mat-radio-button value="fr" (click)="switchLanguage('fr')">French</mat-radio-button>
<mat-radio-button value="de" (click)="switchLanguage('de')">German</mat-radio-button>
</mat-radio-group>
这是一个StackBlitz Demo。
对于其他答案,您可以选择不使用单独的函数来处理change
事件,而是分配如下所示的值: (change)="myBooleanVar = $event.source.checked"
此示例不适用于 OP 的情况,但可能对使用复选框分配是/否值的其他人有用。
点击(是一个DOM事件,而(change(是从Angular框架生成的。
单击将具有通用 DOM 事件对象,并更改 MatCheckboxChange 对象。
单击先触发。