Angular全局公共上传组件如何传参覆盖按钮默认Submit文本

以下方案均不需要修改公共组件原有源码，按实现成本从低到高排序：

• 方案1：CSS 伪元素覆盖（优先推荐，零代码侵入）
  直接在调用组件时加自定义类，通过样式隐藏原有文本、注入自定义显示内容，适配绝大多数静态文本场景。
  父组件调用代码：

  <!-- 给组件加自定义类用于样式定位 -->
  <app-uploader 
    class="override-submit-text"
    [Details]="Details" 
    (onSubmit)="onSubmitEvent($event)">
  </app-uploader>
  

  对应父组件样式代码（Angular默认样式隔离需要加::ng-deep穿透）：

  :host ::ng-deep .override-submit-text button[mat-button][color="primary"] {
    /* 隐藏默认的Submit文本 */
    font-size: 0;
  }
  :host ::ng-deep .override-submit-text button[mat-button][color="primary"]::after {
    /* 替换成你需要的按钮文本，字号和原有mat-button配置保持一致即可 */
    content: "确认上传";
    font-size: 14px;
  }
  

  从你贴的组件源码看，提交按钮内只有纯文本节点，该方案无兼容问题；如果后续按钮新增图标元素，把font-size: 0的逻辑替换为单独隐藏文本节点即可。

• 方案2：自定义指令修改DOM文本（适合多场景复用、需要动态切换文本的场景）
  写一个轻量自定义指令，在组件视图渲染完成后直接定位内部按钮修改文本，灵活度更高，支持动态传值切换文本。
  首先在业务模块声明指令：

  import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
  
  @Directive({ selector: '[uploadBtnText]' })
  export class UploadBtnTextDirective implements AfterViewInit {
    @Input() uploadBtnText = '';
    constructor(private hostEl: ElementRef) {}
  
    ngAfterViewInit() {
      const submitBtn = this.hostEl.nativeElement.querySelector('button[mat-button][color="primary"]');
      if (submitBtn?.textContent?.trim() === 'Submit' && this.uploadBtnText) {
        submitBtn.textContent = this.uploadBtnText;
      }
    }
  }
  

  父组件调用时直接传参即可：

  <app-uploader 
    [uploadBtnText]="btnTextConfig.upload"
    [Details]="Details" 
    (onSubmit)="onSubmitEvent($event)">
  </app-uploader>
  

• 方案3：公共组件非破坏性兼容（长期维护推荐，需组件修改权限）
  如果你有公共组件的修改权限，建议给组件新增可选输入参数，不影响原有业务的调用逻辑，一劳永逸：

  1. 给app-uploader组件新增输入属性：@Input() submitText = 'Submit';
  2. 把组件模板里按钮的硬编码Submit替换为插值表达式{{submitText}}
     原有业务不传submitText参数时，按钮依然显示默认的Submit，不会造成破坏性变更。

内容的提问来源于stack exchange，提问作者Anjali Raj