Angular 继承基类的子组件如何使用基类定义的ng-template

Angular 组件的类继承仅复用TS侧的属性、方法，不会继承父组件模板内定义的<ng-template>片段。每个组件的模板解析是独立作用域，子组件模板无法直接访问父组件模板中声明的模板引用变量。
另外你代码里还有个笔误：基类模板定义的引用名是#selectField，子组件里调用的是selectTemplate，就算是在同一个组件内，名称不匹配也拿不到模板实例。
当前代码不报错是因为ngTemplateOutlet接收到undefined值时会静默渲染空内容，不会抛出异常。

方案1：抽离为独立公共组件（推荐） #

这是最符合Angular设计规范的方案，完全不需要依赖组件继承，把通用渲染逻辑抽成独立的无状态组件，所有需要的子组件直接引入使用即可：

1. 新建公共可复用组件

@Component({
  selector: 'app-common-select-field',
  template: `{{ fieldName }} - {{ record }}`
})
export class CommonSelectFieldComponent {
  @Input() fieldName: string;
  @Input() record: unknown;
}

2. 在需要使用的子组件中直接调用

<ng-container *ngIf="field.DataType == 3">
  <app-common-select-field 
    [fieldName]="fieldName" 
    [record]="recordId"
  ></app-common-select-field>
</ng-container>

这种方案耦合度最低，后续公共模板迭代只需要修改这一个组件即可，不需要调整所有继承类的逻辑。

方案2：通过全局服务共享TemplateRef #

如果一定要用ngTemplateOutlet的方式实现，可以把公共模板放在顶层宿主组件中，通过全局服务把TemplateRef实例下发给所有子类组件：

1. 新建模板共享服务

@Injectable({ providedIn: 'root' })
export class CommonTemplateService {
  selectFieldTpl: TemplateRef<unknown>;
}

2. 在顶层组件（如AppComponent）中声明公共模板，注册到服务

@Component({
  template: `
    <ng-template #selectFieldTpl let-field="fieldName" let-record="recordId">
      {{field}} - {{record}}
    </ng-template>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('selectFieldTpl') selectFieldTpl: TemplateRef<unknown>;
  constructor(private commonTplService: CommonTemplateService) {}

  ngAfterViewInit(): void {
    this.commonTplService.selectFieldTpl = this.selectFieldTpl;
  }
}

3. 在基类中直接引用服务持有的模板实例，子类不需要额外处理即可调用

export class BaseTimeComponent implements OnInit, OnDestroy, AfterViewInit {
  constructor(public commonTplService: CommonTemplateService) {}
  // 其余业务逻辑
}

子类模板中直接调用即可：

<ng-container *ngIf="field.DataType == 3">
  <ng-container
    [ngTemplateOutlet]="commonTplService.selectFieldTpl"
    [ngTemplateOutletContext]="{ fieldName: fieldName, recordId: recordId}"
  ></ng-container>
</ng-container>

不推荐方案 #

不要尝试通过ViewChild跨组件层级获取父类模板，这种实现需要基类组件必须在子类模板中实际渲染，会增加冗余DOM层级，组件耦合度极高，后续维护成本会非常高。

内容的提问来源于stack exchange，提问作者James.mikael