Angular更新手机号组件如何根据调用方调整显示样式并保留功能？

下面是几种实用的实现方式，既能保留更新手机号组件的核心功能，又能适配不同页面的显示需求：

方案1：通过@Input参数控制显示模式 #

给组件添加输入属性，根据传入的参数切换模板结构和样式，核心逻辑完全复用。

步骤： #

1. 在更新手机号组件中定义输入属性：

import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-update-phone',
  templateUrl: './update-phone.component.html',
  styleUrls: ['./update-phone.component.css']
})
export class UpdatePhoneComponent {
  @Input() displayMode: 'modal' | 'inline' = 'modal'; // 默认模态框模式
  phoneForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.phoneForm = this.fb.group({
      newPhone: ['', [Validators.required, Validators.pattern(/^1[0-9]{10}$/)]]
    });
  }

  onSubmit() {
    if (this.phoneForm.valid) {
      // 复用原有的手机号更新逻辑
      console.log('提交新手机号:', this.phoneForm.value.newPhone);
      // 后续的API调用、提示逻辑等都保留
    }
  }

  onCloseModal() {
    // 模态框关闭逻辑，仅在modal模式下生效
  }
}

2. 组件模板中根据displayMode切换结构：

<!-- 模态框模式结构 -->
<div *ngIf="displayMode === 'modal'" class="modal-overlay">
  <div class="modal-content">
    <h3>更新手机号</h3>
    <button class="close-btn" (click)="onCloseModal()">×</button>
    <form [formGroup]="phoneForm" (ngSubmit)="onSubmit()">
      <input type="tel" formControlName="newPhone" placeholder="请输入新手机号">
      <button type="submit" [disabled]="!phoneForm.valid">确认更新</button>
    </form>
  </div>
</div>

<!-- 内嵌模式结构 -->
<div *ngIf="displayMode === 'inline'" class="inline-form">
  <h4>修改绑定手机号</h4>
  <form [formGroup]="phoneForm" (ngSubmit)="onSubmit()">
    <input type="tel" formControlName="newPhone" placeholder="新手机号">
    <button type="submit" [disabled]="!phoneForm.valid">保存修改</button>
  </form>
</div>

3. 样式中针对不同模式写对应规则：

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
}

/* 内嵌表单样式 */
.inline-form {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

4. 调用组件时指定模式：

• 原页面（模态框）：

<app-update-phone displayMode="modal"></app-update-phone>

• 新页面（内嵌）：

<app-update-phone displayMode="inline"></app-update-phone>

方案2：使用内容投影剥离容器结构 #

如果只是外层容器（比如模态框的遮罩、弹窗壳）不符合需求，可以把组件核心的表单逻辑保留，外层容器交给父组件通过内容投影提供。

组件模板只保留核心表单： #

<div class="update-phone-core">
  <form [formGroup]="phoneForm" (ngSubmit)="onSubmit()">
    <input type="tel" formControlName="newPhone" placeholder="请输入新手机号">
    <button type="submit" [disabled]="!phoneForm.valid">确认更新</button>
  </form>
</div>

父组件按需提供外层容器： #

• 原页面（模态框）：

<div class="modal-overlay">
  <div class="modal-content">
    <h3>更新手机号</h3>
    <button class="close-btn" (click)="closeModal()">×</button>
    <app-update-phone></app-update-phone>
  </div>
</div>

• 新页面（内嵌到页面区块）：

<div class="user-settings-section">
  <h4>账号安全</h4>
  <app-update-phone></app-update-phone>
</div>

方案3：通过CSS变量动态调整样式 #

如果只是样式细节（比如背景色、 padding、字体大小）需要调整，不需要改结构，可以用CSS变量让父组件覆盖样式。

组件样式中使用CSS变量： #

.update-phone-form {
  background: var(--form-bg, white);
  padding: var(--form-padding, 2rem);
  border-radius: var(--form-radius, 8px);
}

.update-phone-form input {
  font-size: var(--input-font-size, 1rem);
}

父组件调用时覆盖变量： #

<!-- 原模态框页面用默认样式 -->
<app-update-phone></app-update-phone>

<!-- 新页面自定义样式 -->
<app-update-phone 
  [style.--form-bg]="'#f5f5f5'"
  [style.--form-padding]="'1rem'"
  [style.--input-font-size]="'0.9rem'"
></app-update-phone>

注意事项 #

• 核心业务逻辑（表单验证、提交API、错误处理等）要封装在组件内部或独立的服务中，确保所有调用场景下功能一致。
• 如果需要更复杂的样式切换，可以结合Angular的ngClass指令动态添加/移除CSS类。

内容的提问来源于stack exchange，提问作者Shravya Boggarapu