就是在sub-input组件里，编写一个input触发事件 ，然后在userpage输入数据之后，数据会更新到sub这个子组件的displayedValue中，然后反馈给父组件user-page

在`SubInputComponent`中，你可以创建一个`(ngModelChange)`事件处理器，这个事件会在用户在`<input>`元素上输入或修改内容后立即触发。以下是`SubInputComponent`的HTML部分的一个例子：

<input type="text" [(ngModel)]="displayedValue" (ngModelChange)="onValueChanged()" placeholder="请输入">

这里的`[(ngModel)]`用于实现双向数据绑定，`ngModelChange`则是监听输入值变化的事件。同时，你需要在`SubInputComponent`的类文件中添加`onValueChanged`方法：

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

@Component({
  selector: 'app-sub-input-component',
  template: `
    <input type="text" [(ngModel)]="displayedValue" (ngModelChange)="onValueChanged()" placeholder="请输入">
  `,
})
export class SubInputComponent implements OnChanges {
  @Input() label: string = "";
  @Output() displayedValueChange = new EventEmitter<string>();

  displayedValue: string = "";

  onValueChanged() {
    this.displayedValueChange.emit(this.displayedValue); // 当值改变时，通过事件发射出去
  }

  ngOnChanges(changes: any) {
    if (changes['displayedValue']) { // 如果displayedValue有新的输入，可能是父组件传递过来的
      console.log('Received new value:', changes.displayedValue.currentValue);
    }
  }
}

在`UserPage`或者它的模板中，你需要订阅`displayedValueChange`事件，并将接收到的新值处理或展示给用户：

<app-sub-input-component *ngIf="subInputVisible" [label]="'子组件输入'" (displayedValueChange)="receivedNewValue($event)"></app-sub-input-component>

// UserPage.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-page',
  templateUrl: './user-page.component.html',
  styleUrls: ['./user-page.component.css']
})
export class UserPage implements OnInit {
  subInputVisible: boolean = true;
  receivedNewValue(newValue: string) {
    console.log('子组件发来的值：', newValue); // 这里可以做进一步的处理，比如更新页面某个区域的值
  }

  ngOnInit(): void {
    // 初始化其他逻辑...
  }
}

这样，每当用户在子组件的输入框中输入数据，`UserPage`都会接收到最新的`displayedValue`。如果`subInputVisible`状态发生变化，子组件会被隐藏或显示，相应的影响是否接收更新。