在angular里怎么写

在Angular中，通常我们会使用模板语法和组件（Components）来处理UI交互。如果你想在一个子组件中有一个输入框，并从该输入框获取值并传递给父组件，你可以这样做：

首先，创建一个名为`ChildComponent`的子组件，它有一个`[(ngModel)]`绑定的输入字段：

// ChildComponent.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `
    <div>
      <label for="child-input">请输入:</label>
      <input id="child-input" [(ngModel)]="childValue" (change)="onChange()" />
    </div>
  `,
})
export class ChildComponent {
  @Input() parentValue: string; // 接收父组件传来的值
  childValue: string = '';

  onChange() {
    this.parentValueChanged(this.childValue);
  }

  // 这个方法是你需要定义的，用于通知父组件值已变化
  parentValueChanged(value: string) {
    if (this.parentValue !== value) {
      this.parentValue = value;
    }
  }
}

接着，在父组件`ParentComponent`中使用这个子组件，并通过`<app-child-component [parentValue]="parentValue"></app-child-component>`的形式传递数据：

<!-- ParentComponent.html -->
<app-parent-component (parentValueChanged)="onParentValueChanged($event)">
</app-parent-component>

// ParentComponent.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component [parentValue]="parentValue" (parentValueChanged)="onChildValueChange($event)"></app-child-component>
  `,
})
export class ParentComponent {
  parentValue: string;

  @Output() parentValueChanged = new EventEmitter<string>();

  onChildValueChange(value: string) {
    console.log('Child component value changed:', value);
    this.parentValueChanged.emit(value);
  }

  // 其他父组件功能...
}

当你在子组件的输入框中输入值时，`parentValueChanged`事件会被触发，父组件会接收到新的值。