在angular。上面那一段怎么实现写一个子组件，里面有一个label 和 一个输入框， label的表示内容是由外部传入的，当输入框内输入值后将这个值传递给父组件

在Angular中，实现这样的功能，你可以创建一个自定义的子组件，并利用@Input()属性接收外部传来的数据，以及EventEmitter或Output()接口来监听并发送事件。这里是一个简单的步骤说明：

1. **创建子组件**: 首先，在`src/app`目录下创建一个新的文件夹（假设名为`custom-input`），然后在其中创建一个名为`custom-input.component.ts`的文件，编写如下：

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

@Component({
  selector: 'app-custom-input',
  template: `
    <div>
      <label>{{ label }}</label>
      <input type="text" [(ngModel)]="value">
      <button (click)="onValueChanged()">提交</button>
    </div>
  `,
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
  @Input() label: string; // 接收外部传来的标签文本
  @Output() valueChanged = new EventEmitter<string>(); // 输出事件

  onValueChanged() {
    this.valueChanged.emit(this.value); // 当输入改变时触发事件，并传递当前值到父组件
  }
}

2. **添加模板引用**: 在`custom-input.component.html`中，引入`<ng-template>`或直接使用`<ng-container>`来绑定事件处理函数，例如：

<!-- 或者使用 ng-template -->
<ng-template #onClick let-value="value">
  <!-- 父组件模板里 -->
  <button (click)="handleValueChange(value)">提交</button>
</ng-template>

<!-- 或者直接在 HTML 模板上绑定 -->
<button [ngTemplateOutlet]="onClick" [ngTemplateOutletContext]="{ value: $event }"></button>

3. **在父组件中使用**: 在需要使用子组件的地方，导入并声明`CustomInputComponent`，并将其包含在模板中，同时绑定事件处理函数：

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

@Component({
  selector: 'app-parent-component',
  template: `
    <app-custom-input [label]="'请输入信息：'" (valueChanged)="handleValue($event)"></app-custom-input>
  `,
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
  handleValue(value: string) {
    console.log('从子组件接收到的值:', value);
    // 这里可以进一步操作接收到的值
  }
}