将输入中输入的数据发送到父组件

Question

在包含新的子组件之后，我必须控制输入的数据以发送到父组件。

数据必须通过写入输入来生成。

class AuthScreen extends StatelessWidget {
  static const routeName = '/auth';

  @override
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
    return Scaffold(
      key: Key("auth_screen"),
      backgroundColor: Colors.white,

我实现了在子组件中使用@Output发出自定义事件。 使用@ViewChild 我尝试获取我在输入中写的内容，但它仅在我单击自己的输入后才获取数据

<span flex>
  <button
    mat-icon-button
    (click)="decrease($event)"
    [disabled]="decreaseButtonDisabled"
  >
    <mat-icon>remove_circle_outline</mat-icon>
  </button>
  <mat-form-field flex>
    <input
      matInput
      #inputNumberPickerControl
      (click)="onNumberControl()"
      name="numberPickerInputField"
      [value]="numberPickerValue"
      style="text-align:center;"
      [disabled]="disabled"
    />
  </mat-form-field>
  <button
    mat-icon-button
    (click)="increase($event)"
    [disabled]="increaseButtonDisabled"
  >
    <mat-icon>add_circle_outline</mat-icon>
  </button>
</span>

我在父组件中接收到事件。

@Output() onChange: EventEmitter<number> = new EventEmitter();

@ViewChild('inputNumberPickerControl', { static: false }) inputElementRef: ElementRef;


constructor() {
    this.numberPickerValue = 0;
}

onNumberControl() {
  const valueInput = parseInt(this.inputElementRef.nativeElement.value);

  if (valueInput as number) {
    this.numberPickerValue = valueInput;
    if (this.numberPickerValue < this.max && this.numberPickerValue > this.min) {
      this.onChange.emit(this.numberPickerValue);
    }
  }
}