将标签连接到复选框组件
Connect label to checkbox component
我创建了一个如下所示的自定义复选框组件:
checkbox.component.ts
import {Component, Input, OnInit, forwardRef} from "@angular/core"
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"
@Component({
selector: "checkbox",
template: `
<input type="checkbox" [checked]="checked" (change)="checkedChanged($event)" [id]="id">
<label [for]="id"><span>{{checked ? "✓" : " "}}</span></label>
`,
styles: [`
input {
opacity: 0;
position: fixed;
}
label {
line-height: 16px;
height: 16px;
width: 16px;
border-radius: 5px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-bottom: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}
]
})
export class CheckboxComponent implements OnInit, ControlValueAccessor {
static idCounter = 1
@Input() id: string
checked: boolean
propagateChange = (_: any) => {}
onTouchedCallback = () => {}
ngOnInit () {
// If an ID wasn't provided, generate a unique one
if (!this.id) {
this.id = "checkboxcomponent" + CheckboxComponent.idCounter++
}
}
checkedChanged (event) {
this.checked = event.target.checked
this.propagateChange(event.target.checked)
}
// ControlValueAccessor requirements
writeValue (value: any) {
this.checked = value
}
registerOnChange (func: any) {
this.propagateChange = func
}
registerOnTouched (func: any) {
this.onTouchedCallback = func
}
}
html 例子
<div class="col-4 text-right">
<label for="foo">Foo:</label>
</div>
<div class="col-8">
<checkbox [(ngModel)]="bar" id="foo"></checkbox>
</div>
复选框本身工作正常,但标签不工作。我想将 ID 作为输入传递,以便我可以将它连接到外部标签(标签定位在应用程序的不同部分是不同的,所以我不能将它包含在组件中),并且检查页面显示它使用了正确的 ID,但单击标签不会切换复选框。我认为这是组件的某种范围界定问题,但我不确定如何处理。有没有办法让它工作而不必在每次使用时添加额外的 (click)
函数或其他东西?
如果你改变
@Input id: string;
到
@Input checkboxId: string;
并在 <checkbox [(ngModel)]="bar" checkboxId="foo"></checkbox>
中使用它会很好用。
我创建了一个如下所示的自定义复选框组件:
checkbox.component.ts
import {Component, Input, OnInit, forwardRef} from "@angular/core"
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"
@Component({
selector: "checkbox",
template: `
<input type="checkbox" [checked]="checked" (change)="checkedChanged($event)" [id]="id">
<label [for]="id"><span>{{checked ? "✓" : " "}}</span></label>
`,
styles: [`
input {
opacity: 0;
position: fixed;
}
label {
line-height: 16px;
height: 16px;
width: 16px;
border-radius: 5px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-bottom: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}
]
})
export class CheckboxComponent implements OnInit, ControlValueAccessor {
static idCounter = 1
@Input() id: string
checked: boolean
propagateChange = (_: any) => {}
onTouchedCallback = () => {}
ngOnInit () {
// If an ID wasn't provided, generate a unique one
if (!this.id) {
this.id = "checkboxcomponent" + CheckboxComponent.idCounter++
}
}
checkedChanged (event) {
this.checked = event.target.checked
this.propagateChange(event.target.checked)
}
// ControlValueAccessor requirements
writeValue (value: any) {
this.checked = value
}
registerOnChange (func: any) {
this.propagateChange = func
}
registerOnTouched (func: any) {
this.onTouchedCallback = func
}
}
html 例子
<div class="col-4 text-right">
<label for="foo">Foo:</label>
</div>
<div class="col-8">
<checkbox [(ngModel)]="bar" id="foo"></checkbox>
</div>
复选框本身工作正常,但标签不工作。我想将 ID 作为输入传递,以便我可以将它连接到外部标签(标签定位在应用程序的不同部分是不同的,所以我不能将它包含在组件中),并且检查页面显示它使用了正确的 ID,但单击标签不会切换复选框。我认为这是组件的某种范围界定问题,但我不确定如何处理。有没有办法让它工作而不必在每次使用时添加额外的 (click)
函数或其他东西?
如果你改变
@Input id: string;
到
@Input checkboxId: string;
并在 <checkbox [(ngModel)]="bar" checkboxId="foo"></checkbox>
中使用它会很好用。