子组件: sub-input.component.ts 父组件：user-page.component.ts写一个子组件，里面有一个label 和 一个输入框， label的表示内容是由外部传入的，当输入框内输入值后将这个值传递给父组件。

在Angular中创建一个名为`sub-input.component.ts`的子组件，首先你需要声明该组件并定义其结构，包括标签（`<label>`）和输入框（`<input>`），以及一个事件处理器来监听输入变化。假设你已经安装了Angular CLI，下面是一个简单的例子：

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

@Component({
  selector: 'app-sub-input',
  template: `
    <div>
      <label [ngContent]="labelText"></label>
      <input type="text" [(ngModel)]="inputValue" (input)="onInputChange($event)">
    </div>
  `,
})
export class SubInputComponent {
  @Input() labelText: string; // 接收父组件传来的label文本
  inputValue: string = ""; // 存储输入框的值

  onInputChange(event: any) {
    this.parentValueChanged(this.inputValue); // 当输入改变时，触发父组件的方法并传递新值
  }

  parentValueChanged(value: string) {
    // 这里你可以通过注入ChangeDetectorRef或者EventEmitter等方式，将值发送给父组件的用户页
  }
}

然后，在`user-page.component.ts`中，你需要导入`SubInputComponent`，并使用它：

// user-page.component.ts
import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
import { SubInputComponent } from './sub-input.component';

@Component({
  selector: 'app-user-page',
  templateUrl: './user-page.component.html',
  styleUrls: ['./user-page.component.css'],
})
export class UserPageComponent {
  @ViewChild(SubInputComponent) subInput: SubInputComponent;
  @Output() inputValueChanged = new EventEmitter<string>();

  displayLabel = "请输入你的名字"; // 初始化显示的label文本

  handleInputValue(value: string) {
    console.log('从子组件接收到的值:', value);
    this.inputValueChanged.emit(value); // 触发父组件事件并将值广播出去
  }
}

在`user-page.component.html`中，你可以这么使用子组件：

<app-sub-input [labelText]="displayLabel" (inputValueChanged)="handleInputValue($event)"></app-sub-input>

这样，当你在`sub-input`组件的输入框中输入内容时，会通过`inputValueChanged`事件通知到`user-page`组件，父组件可以处理这个值。