Question

我有一个自定义输入组件，这里是代码：

HTML：

 <input class='ctrl__counter-input' maxlength='10' type='text' [value]="counterValue" [ngModel]="counterValue"
               (ngModelChange)="onKey(input)">

打字稿：

export class BaCounterInput {


    @Input('minimum') minimum: number;
        @Input('maximum') maximum: number;
        @Input('counterValue') counterValue: number;
        @Output() counterResult = new EventEmitter<number>();
    /* rest of component*/

onKey( event: any ): void {
        console.log(event);
        let testNumber = parseInt(event);

        if ( !isNaN(testNumber) ) {
            ((testNumber >= this.minimum) && (testNumber <= this.maximum) ) ? this.setCounter(testNumber) : this.counterValue;
            this.counterResult.emit(this.counterValue);
        }
        this.counterResult.emit(this.counterValue);
    }
}

这就是我在主机组件中调用它的方式：

<label for="sale_year_input">Purchase Price</label>
            <input-counter id="sale_year_input"
                           [minimum]="1" [maximum]="10"
                           [counterValue]="sale_year"
                           (counterResult)="sale_year"
                           [(ngModel)]="sale_year"
                           (ngModelChange)="calculateOutput()" ngDefaultControl>

问题在于我无法弄清楚如何触发calculateOut（）。值得注意的是，sale_year同时是输入和输出，当它发生变化时，应触发calculateOutput（）函数。任何建议都非常感谢。

Answer 1

ngModelChange应该输入$event作为输入，然后您可以相应地存储它：

<input class='ctrl__counter-input' maxlength='10' type='text' [value]="counterValue" [ngModel]="counterValue"
               (ngModelChange)="onKey($event)">

...

onKey(newValue): void {
    this.data = newValue;
    // ....
}

每次按键都会触发此事件

如何在自定义输入上触发ngModelChange？

1 个答案: