angular中写一个子组件，里面有一个label 和 一个输入框， label的表示内容是由外部传入的，当输入框内输入值后将这个值传递给父组件 父组件将输入的值输出在页面上

在Angular中创建一个简单的子组件，可以分为以下几个步骤：

首先，我们需要创建一个新的子组件。假设我们将其命名为`ChildInputComponent`，并在`src/app`目录下新建一个文件夹`child-input`，然后创建一个名为`child-input.component.ts`的文件，添加如下代码：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child-input',
  template: `
    <div>
      <label [innerHTML]="labelContent">{{labelContent}}</label>
      <input type="text" (input)="onInputChange($event.target.value)">
    </div>
  `,
})
export class ChildInputComponent {
  @Input() labelContent: string;

  onInputChange(value: string) {
    this.parentValue = value; // 这里假设存在parentValue属性来接收值
    // 如果父组件有提供事件或者方法，你可以通过@Output()触发它
    // 输出到父组件
    // @Output() parentValueChanged = new EventEmitter<string>();
    // parentValueChanged.emit(value);
  }
}

接着，在父组件中引用并使用这个子组件，并将`labelContent`作为输入属性绑定：

import { Component, OnInit } from '@angular/core';
import { ChildInputComponent } from './child-input/child-input.component';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent implements OnInit {
  childValue: string;

  ngOnInit(): void {
    // 初始化或从服务获取label内容
    const initialLabel = '请输入内容';
    // 将子组件放入模板中，并绑定输入值
    this.childValue = this.childInput.labelContent = initialLabel;
  }

  // 如果你需要实时更新父组件显示的值，可以在子组件的`onInputChange`事件回调中使用
  // 子输入改变时显示新的值
  displayChildValue(value: string): void {
    this.childValue = value;
  }
}

在HTML模板部分，将`ChildInputComponent`嵌套在`ParentComponentComponent`中：

<app-child-input [(labelContent)]="childValue" (onInputChange)="displayChildValue($event)"></app-child-input>

<p>您输入的内容: {{ childValue }}</p>

现在，当你在子组件的输入框输入内容时，`parent-value`将在父组件中更新并显示。