Angular 16中独立组件无法通过provide/useClass覆盖的问题

我尝试在Angular 16里用provide和useClass覆盖独立组件：在模板中使用<app-card>标签，同时在AppComponent的providers数组里配置把CardComponent替换成CardOverrideComponent，但页面始终显示“card works!”，而非预期的“card-override works!”，组件替换失败的原因是什么？

相关代码文件 #

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { CardOverrideComponent } from './card-override/card-override.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CardComponent, // 导入原始组件
    CardOverrideComponent, // 导入覆盖组件
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts #

import { Component } from '@angular/core';
import { CardComponent } from './card/card.component';
import { CardOverrideComponent } from './card-override/card-override.component';

@Component({
  selector: 'app-root',
  template: ` <app-card></app-card> `,
  styleUrls: ['./app.component.scss'],
  providers: [{ provide: CardComponent, useClass: CardOverrideComponent }], // 此处期望用覆盖组件替换原始组件
})
export class AppComponent {
}

card.component.ts #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>
      card works!
    </p>
  `,
  styles: [
  ]
})
export class CardComponent {

}

card-override.component.ts #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardComponent } from '../card/card.component';

@Component({
  selector: 'app-card-override',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>
      card-override works!
    </p>
  `,
  styles: [
  ]
})
export class CardOverrideComponent extends CardComponent {

}

核心原因 #

你通过providers配置的DI替换规则，仅对依赖注入创建的组件实例生效，但模板里直接写的<app-card>标签是Angular根据组件的selector直接创建原始组件实例，完全不经过DI容器，所以替换规则根本没起作用。另外，CardOverrideComponent的selector与原始组件不一致，也无法通过标签匹配实现替换。

解决方法 #

方式1：利用DI动态渲染组件 #

修改AppComponent，不直接写<app-card>标签，而是通过DI获取CardComponent实例（此时已被替换为CardOverrideComponent），动态渲染到页面：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { CardComponent } from './card/card.component';
import { CardOverrideComponent } from './card-override/card-override.component';

@Component({
  selector: 'app-root',
  template: `<div #cardContainer></div>`,
  styleUrls: ['./app.component.scss'],
  providers: [{ provide: CardComponent, useClass: CardOverrideComponent }],
})
export class AppComponent implements OnInit {
  @ViewChild('cardContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private card: CardComponent) {}

  ngOnInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(this.card.constructor as any);
    this.container.createComponent(factory);
  }
}

方式2：修改覆盖组件的selector直接替换 #

让CardOverrideComponent使用与原始组件相同的selector，直接通过标签匹配实现替换：

修改card-override.component.ts：

@Component({
  selector: 'app-card', // 改为和原始组件一致的selector
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>
      card-override works!
    </p>
  `,
  styles: [
  ]
})
export class CardOverrideComponent extends CardComponent {
}

然后在AppComponent中仅导入覆盖组件：

import { Component } from '@angular/core';
import { CardOverrideComponent } from './card-override/card-override.component';

@Component({
  selector: 'app-root',
  template: ` <app-card></app-card> `,
  styleUrls: ['./app.component.scss'],
  imports: [CardOverrideComponent], // 只导入覆盖组件
})
export class AppComponent {
}

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