Подключить метку к компоненту флажка

Question

Я создал пользовательский флажок компонента, который выглядит следующим образом:

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 ? "&#10003;" : "&nbsp;"}}</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>

Сам флажок работает отлично, но ярлык - нет. Я хотел передать идентификатор в качестве входного, чтобы я мог подключить его к внешней метке (расположение меток отличается в разных частях приложения, поэтому я не мог включить его в компонент), и проверка страницы показывает, что он использует правильный идентификатор, но нажатие на ярлык не переключает флажок. Я предполагаю, что это какая-то проблема с компонентом, но я не знаю, как с этим справиться. Есть ли способ заставить его работать без добавления дополнительного (click) функция или что-то каждый раз, когда я использую это?

Answer 1

Если вы измените

@Input id: string;

в

@Input checkboxId: string;

и использовать его в <checkbox [(ngModel)]="bar" checkboxId="foo"></checkbox> это будет работать просто отлично.

https://stackblitz.com/edit/angular-qxjb4q