如何在模板中创建自定义输入元素以使用Angular/Ionic？

// custom-input.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-custom-input',
  template: `
    <input [value]="value" (input)="onInput($event.target.value)">
  `,
  styles: [`
    input {
      border: 1px solid gray;
      padding: 5px;
    }
  `]
})
export class CustomInputComponent {
  @Input() value: string;
  @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();

  onInput(value: string) {
    this.value = value;
    this.valueChange.emit(value);
  }
}

<!-- parent.component.html -->
<app-custom-input [(value)]="inputValue"></app-custom-input>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  inputValue: string = '';

  onInputChange(value: string) {
    console.log('Input value:', value);
  }
}