帮我每个代码加上注释

当然，我会为您解释并添加注释到代码中：

import { Component, OnInit } from '@angular/core'; // 导入Angular的核心模块，用于声明组件及生命周期钩子
import { SubInputComponent } from '../sub-input/sub-input.component'; // 导入子组件，假设它位于'sub-input'目录下
import { Router } from '@angular/router'; // 导入路由器，用于导航
import { CommonModule } from '@angular/common'; // 导入通用模块，包含了常见的HTML元素和样式
import { FormsModule } from '@angular/forms'; // 导入表单模块，用于处理表单输入

// 定义UserPageComponent类
@Component({
  selector: 'app-user-page', // 组件的选择器，可以在HTML模板中使用<app-user-page></app-user-page>
  standalone: true, // 是否允许这个组件作为一个独立的应用运行
  imports: [
    CommonModule, // 共享的模块
    RouterModule.forRoot(), // 如果有自定义路由，这里初始化RouterModule
    FormsModule, // 表单模块，用于组件中的数据绑定和验证
    SubInputComponent // 子组件的导入
  ],
  templateUrl: './user-page.component.html', // 指定组件的HTML模板文件路径
  styleUrls: ['./user-page.component.css'] // 指定组件的CSS文件路径
})
export class UserPageComponent implements OnInit { // 实现OnInit接口，保证组件初始化完成后执行ngOnInit()

  name: string = ''; // 用户名字段初始值为空字符串
  phone: string = ''; // 手机号码字段初始值为空字符串

  // 利用 ViewChild 注解，动态查找子组件并访问其实例
  @ViewChild(SubInputComponent) subInputComponent: SubInputComponent;

  showInputDisplay = false; // 输入框是否显示的标志，默认隐藏

  // 生命周期钩子ngOnInit，在组件初次加载时执行
  ngOnInit(): void {
    
    // 当用户名称发生变化时，更新name字段的值
    onNameChange(event: string): void {
      this.name = event;
    }

    // 当用户电话号码发生变化时，更新phone字段的值
    onPhoneChange(event: string): void {
      this.phone = event;
    }

    // 显示子输入组件
    displayInput() {
      this.subInputComponent.displayInput(); // 调用子组件的方法显示输入框
      this.showInputDisplay = true;
    }

    // 清除输入框
    clearInput() {
      this.subInputComponent.clearInput(); // 调用子组件的方法清除输入
      this.showInputDisplay = false;
    }
}