切换开关更改标签文本并返回布尔值Angular 11引导程序

Question

我想用现代的方式将我网站上的几个切换开关的状态更改为是或否。

我没有找到一个现成的解决方案，所以我必须想办法在Angular中正确地制作它。

我有10个开关，它们必须返回一个单独的布尔值，并将其文本更改为"；是"；或"；否"；单独。如何在Angular中实现这一点？

这是我当前的代码，适用于1个交换机。(使用Angular 11中的bootstrap 5(

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" (change)="isTrue()" id="flexSwitchCheckDefault">
<label *ngIf="isTrue()" class="form-check-label" for="flexSwitchCheckDefault">Yes</label>
<label *ngIf="isFalse()" class="form-check-label" for="flexSwitchCheckDefault">No</label>
</div>

.ts

export class SComponent implements OnInit {
status = true;
constructor() {
}
ngOnInit(): void {
}
isTrue() {
return this.status = !this.status;
}
isFalse() {
return this.status === false;
}
}

Answer 1

您可以创建开关切换组件并将其导入ShareModule

import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from "@angular/core";
@Component({
selector: "switch-toggle",
templateUrl: "./switch-toggle.component.html",
styleUrls: ["./switch-toggle.component.scss"]
})
export class SwitchToggleComponent implements OnInit {
@Input() id?: string;
@Output() onChange: EventEmitter<any> = new EventEmitter();
value: boolean;
constructor() {}
ngOnInit() {}

setValue(value) {
this.value = value;
this.onChange.emit({id: this.id, value: this.value});
}
}

<label class="switch" [ngClass]="{active: value}">
<input type="checkbox" [id]="id" (change)="setValue(e.target.checked)">
<span class="slider round"></span>
</label>

并将其用于组件

<switch-toggle [id]="'test1'" (onChange)="doFunction($event)"></switch-toggle>

每次更改开关时，都会获得类似｛id:'test1'，value:true或false｝的对象