Angular中如何用ContentChild结合ng-content适配继承基类的组件？

Angular的ContentChild默认不会根据类的继承关系查询组件实例，只能匹配具体的组件类或选择器，这就是直接用基类TableBaseComponent查询时返回undefined的原因。以下是三种通用解决方案：

方案一：模板引用变量 + 类型断言 #

通过给投影的表格组件添加模板引用变量，容器组件通过变量名查询实例后，断言为基类类型即可实现通用数据传递。

1. 修改父组件模板（component-one.html）：

<app-table-container [data]="tableData">
  <!-- 添加模板引用变量 #tableComponent -->
  <app-some-table #tableComponent></app-some-table>
</app-table-container>

2. 修改表格容器组件（table-container.component.ts）：

import { Component, Input, AfterContentInit, ContentChild } from '@angular/core';
import { TableBaseComponent } from './table-base.component';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html',
  styleUrls: ['./table-container.component.scss']
})
export class TableContainerComponent implements AfterContentInit {
  @Input() data: ITableStuff;
  // 通过模板引用变量查询实例
  @ContentChild('tableComponent') tableComponent: unknown;
  
  ngAfterContentInit(): void {
    // 断言为基类类型并赋值
    const baseTable = this.tableComponent as TableBaseComponent;
    if (baseTable) {
      baseTable.data = this.data;
    }
  }
}

方案二：使用InjectionToken注入基类实例 #

通过定义注入令牌，让每个子类组件提供自身作为基类实例，容器组件通过令牌查询即可兼容所有继承基类的表格。

1. 修改基类组件（table-base.component.ts）：

import { InjectionToken, Component, Input, AfterViewInit } from '@angular/core';

// 定义注入令牌
export const TABLE_BASE_INSTANCE = new InjectionToken<TableBaseComponent>('TableBaseInstance');

@Component({
  template: ''
})
export class TableBaseComponent implements AfterViewInit {
  @Input() data: ITableStuff;

  ngAfterViewInit(): void {
    console.log(this.data.name);
  }
}

2. 修改子类表格组件（some-table.ts）：

import { Component } from '@angular/core';
import { TableBaseComponent, TABLE_BASE_INSTANCE } from './table-base.component';

@Component({
  selector: 'app-some-table',
  template: '<p>some-table works!</p>',
  // 提供令牌，将自身实例关联到基类令牌
  providers: [
    { provide: TABLE_BASE_INSTANCE, useExisting: SomeTableComponent }
  ]
})
export class SomeTableComponent extends TableBaseComponent {
  constructor() {
    super();
  }
}

3. 修改表格容器组件（table-container.component.ts）：

import { Component, Input, AfterContentInit, ContentChild } from '@angular/core';
import { TABLE_BASE_INSTANCE, TableBaseComponent } from './table-base.component';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html',
  styleUrls: ['./table-container.component.scss']
})
export class TableContainerComponent implements AfterContentInit {
  @Input() data: ITableStuff;
  // 通过注入令牌查询基类实例
  @ContentChild(TABLE_BASE_INSTANCE) tableComponent: TableBaseComponent;
  
  ngAfterContentInit(): void {
    if (this.tableComponent) {
      this.tableComponent.data = this.data;
    }
  }
}

方案三：将基类改为@Directive装饰 #

Angular的ContentChild可以识别基于Directive的继承关系，将基类从@Component改为@Directive后，即可直接通过基类查询所有子类组件。

1. 修改基类组件（table-base.component.ts）：

import { Directive, Input, AfterViewInit } from '@angular/core';

// 将@Component改为@Directive
@Directive({
  selector: '[tableBase]' // 可选，也可以留空
})
export class TableBaseComponent implements AfterViewInit {
  @Input() data: ITableStuff;

  ngAfterViewInit(): void {
    console.log(this.data.name);
  }
}

2. 子类表格组件无需额外修改（some-table.ts）：

import { Component } from '@angular/core';
import { TableBaseComponent } from './table-base.component';

@Component({
  selector: 'app-some-table',
  template: '<p>some-table works!</p>'
})
export class SomeTableComponent extends TableBaseComponent {
  constructor() {
    super();
  }
}

3. 表格容器组件保持原有查询逻辑即可（table-container.component.ts）：

import { Component, Input, AfterContentInit, ContentChild } from '@angular/core';
import { TableBaseComponent } from './table-base.component';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html',
  styleUrls: ['./table-container.component.scss']
})
export class TableContainerComponent implements AfterContentInit {
  @Input() data: ITableStuff;
  // 直接通过基类查询即可
  @ContentChild(TableBaseComponent) tableComponent: TableBaseComponent;
  
  ngAfterContentInit(): void {
    if (this.tableComponent) {
      this.tableComponent.data = this.data;
    }
  }
}

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