Запретить компоненту генерировать события щелчка при установке определенного свойства

Question

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

import {Component, Input, OnInit, forwardRef} from "@angular/core"
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"

@Component({
    selector: "checkbox",
    template: `
        <input type="checkbox" [disabled]="disabled" [checked]="checked" (change)="checkedChanged($event)" [id]="checkboxid">
        <label [for]="checkboxid"><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() disabled: boolean
    @Input() checkboxid: string
    
    checked: boolean
    propagateChange = (_: any) => {}
    onTouchedCallback = () => {}

    ngOnInit () {
        // If an ID wasn't provided, generate a unique one
        if (!this.checkboxid) {
            this.checkboxid = "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
    }
}

И я использую его так:

<checkbox [(ngModel)]="isChecked" checkboxid="foo" (click)="checkBoxClicked()" [disabled]="isDisabled"></checkbox>

Когда я щелкаю по нему, когда isDisabled истинно, это правильно предотвращает изменение значения isChecked, но функция checkBoxClicked() все равно вызывается. Как запретить компоненту генерировать события щелчка, пока его свойство disabled истинно? Я знаю, что могу просто проверить это как часть вызова функции, но я бы предпочел обрабатывать это внутри компонента, поэтому мне не нужно делать это каждый раз вручную.

Answer 1

Это происходит потому, что событие click из тега label не обрабатывается в дочернем компоненте. Вы можете привязать обработчик событий и остановить его распространение.

Попробуйте следующий

@Component({
    selector: "checkbox",
    template: `
        <input type="checkbox" [disabled]="disabled" [checked]="checked" (change)="checkedChanged($event)" [id]="checkboxid">
        <label (click)="labelClick($event)" [for]="checkboxid"><span>{{checked ? "&#10003;" : "&nbsp;"}}</span></label>
    `,
     ...

export class CheckboxComponent implements OnInit, ControlValueAccessor {
    ...

    labelClick (event) {
      if (this.disabled) {
        event.stopPropagation();
      }
    }
}

Рабочий пример: Stackblitz