Angular中如何重写第三方模块的组件声明？

你的需求完全可以实现，我会分通用场景和你提到的Angular Material步进器具体场景分别说明：

一、针对Angular Material水平步进器的最优方案 #

其实Material官方已经提供了自定义步进器头部的原生方案，完全不需要重写组件，直接使用matStepperHeader模板指令即可，这也是官方推荐的稳定做法：

<mat-horizontal-stepper>
  <mat-step>
    <!-- 自定义头部模板 -->
    <ng-template matStepperHeader>
      <div class="custom-stepper-header">
        <span>我的自定义步骤1</span>
        <mat-icon>check_circle</mat-icon>
      </div>
    </ng-template>
    <!-- 步骤内容 -->
    <p>步骤1的内容...</p>
  </mat-step>
</mat-horizontal-stepper>

这个模板会直接替换默认的步进器头部组件，无需处理任何模块冲突问题。

二、通用第三方组件替换方案 #

如果是其他没有官方自定义入口的第三方组件，我们可以通过以下两种方法实现替换：

方法1：创建包装模块覆盖组件声明 #

Angular的组件选择器匹配规则是：优先从当前组件所属模块的声明中查找匹配项。我们可以创建一个自定义模块，只导入第三方模块中需要用到的组件（而非整个第三方模块），然后声明我们的自定义组件，让组件解析时优先匹配我们的版本：

1. 首先创建自定义模块：

import { NgModule } from '@angular/core';
// 导入第三方模块中的Cmp1（注意确保该组件被第三方模块导出）
import { Cmp1 } from 'third-party';
import { MyCmp2 } from './my-cmp2.component';

@NgModule({
  // 声明Cmp1和我们的自定义MyCmp2（此时Cmp1的模板会匹配到MyCmp2）
  declarations: [Cmp1, MyCmp2],
  // 导出Cmp1供AppComponent使用
  exports: [Cmp1]
})
export class CustomThirdPartyModule {}

2. 修改AppModule，导入这个自定义模块而非原第三方模块：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CustomThirdPartyModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

⚠️ 注意：这种方法的前提是第三方组件（Cmp1）被其所属模块导出了，如果第三方模块将Cmp1设为内部私有（未导出），这种方法会失效。

方法2：使用Compiler API修改组件元数据 #

如果方法1不可行（比如第三方组件未导出），可以通过Angular的Compiler服务直接修改原有组件的元数据，替换其模板或逻辑：

import { NgModule, Compiler, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ThirdPartyModule, Cmp2 } from 'third-party';
import { AppComponent } from './app.component';
import { MyCmp2 } from './my-cmp2.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ThirdPartyModule],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private compiler: Compiler, private appRef: ApplicationRef) {}

  ngDoBootstrap() {
    // 覆盖原有Cmp2的模板和样式为我们自定义的MyCmp2的内容
    this.compiler.overrideComponent(Cmp2, {
      set: {
        template: MyCmp2.template,
        styles: MyCmp2.styles,
        // 如果需要继承原有Cmp2的逻辑，可以调整providers或其他元数据
      }
    });
    // 手动启动应用
    this.appRef.bootstrap(AppComponent);
  }
}

⚠️ 注意：overrideComponent原本是为测试场景设计的，生产环境使用需要谨慎，部分Angular编译优化可能会导致修改不生效。

为什么你之前的DI方案不生效？ #

你尝试的{ provide: Cmp2, useClass: MyCmp2 }是依赖注入的替换方式，但组件实例是通过组件工厂创建的，而非依赖注入获取的。这个DI配置只会影响那些通过@Inject(Cmp2)主动注入的实例，不会影响模板中通过选择器<app-cmp2>创建的组件实例，所以才会无效。

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