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

创建一个Angular子组件来满足这个需求，你可以遵循以下几个步骤：

1. **创建子组件**: 在`src/app`目录下创建一个名为`custom-input`的新文件夹，然后分别创建三个文件：`custom-input.component.ts`, `custom-input.component.html`, 和 `custom-input.component.css`。

**custom-input.component.ts**:

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputModule {
  @Input() labelText: string; // 接收来自父组件的标签文本

  inputValue: string = ''; // 存储用户输入的值

  onSubmit() {
    this.parentComponent.inputValueChanged(this.inputValue); // 当输入改变时，触发事件通知父组件
  }
}

**custom-input.component.html**:

<label>{{ labelText }}</label>
<input type="text" [(ngModel)]="inputValue" (keyup.enter)="onSubmit()" />
<button (click)="onSubmit()">提交</button>

**custom-input.component.css**:
这部分可以根据需要自定义样式，这里可以留空。

2. **在父组件中使用子组件**:

在`src/app`下的`app.component.html` 或其他你想要显示子组件的父组件模板中引入子组件，并设置标签文本：

<app-custom-input [labelText]="'请输入名称'" (inputValueChanged)="displayValue($event)"></app-custom-input>

<!-- 显示用户输入的位置 -->
<p *ngIf="userInput">用户输入: {{ userInput }}</p>
<button (click)="clearInput()">清除</button>

**app.component.ts**:

import { Component } from '@angular/core';
import { CustomInputModule } from './custom-input/custom-input.component';

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

  displayValue(inputValue) {
    this.userInput = inputValue;
  }

  clearInput() {
    this.userInput = '';
  }
}

现在，当你在子组件的输入框中输入内容并点击提交按钮，输入的值会被传递给父组件并在指定位置显示。点击清除按钮则会清空输入框和显示的内容。