Angular可复用组件自定义函数：不修改通用组件实现需求

方案一：继承原组件并扩展（推荐） #

创建新组件继承目标可复用组件，重写sendCode方法，同时通过可选参数兼容原有调用逻辑：

// 导入原组件
import { OriginalComponent } from './original.component';

@Component({
  selector: 'app-extended-component',
  template: `<ng-content></ng-content>` // 复用原组件模板或自定义
})
export class ExtendedComponent extends OriginalComponent {
  // 重写方法，支持新参数且兼容旧调用
  sendCode(phone: string, code?: string, name?: string) {
    // 此处编写携带code、name的新请求逻辑
    console.log('请求参数：', phone, code, name);
    // 若需保留原组件部分逻辑，可调用super.sendCode(phone)
  }
}

后续使用时直接替换为这个新组件即可，完全不改动原组件代码。

方案二：原型修改原组件方法（全局生效，谨慎使用） #

如果需要所有使用原组件的场景都生效，可修改组件原型方法，但此方式会全局影响原组件行为，需确认无副作用：

// 在应用初始化处（如main.ts或app.module.ts的初始化逻辑中）
import { OriginalComponent } from './original.component';

// 保存原方法引用（如需保留原逻辑）
const originalSendCode = OriginalComponent.prototype.sendCode;

OriginalComponent.prototype.sendCode = function(phone: string, code?: string, name?: string) {
  // 编写新的请求逻辑
  console.log('新请求参数：', phone, code, name);
  // 若需执行原逻辑，调用originalSendCode.call(this, phone)
};

方案三：包装组件扩展功能 #

通过包装原组件，对外暴露带新参数的sendCode方法，内部自行处理请求：

@Component({
  selector: 'app-wrapper-component',
  template: `<original-component #originComp></original-component>`
})
export class WrapperComponent {
  @Input() code: string;
  @Input() name: string;
  @ViewChild('originComp') originComp: OriginalComponent;

  sendCode(phone: string) {
    // 自行实现携带phone、code、name的请求逻辑
    this.sendRequestWithExtraParams(phone, this.code, this.name);
  }

  private sendRequestWithExtraParams(phone: string, code: string, name: string) {
    // 请求服务器的具体逻辑
  }
}

内容的提问来源于stack exchange，提问作者Tzippy Wo