Angular如何引用@Component装饰器中定义的组件自身模板？

获取@Component装饰器中定义的组件模板 #

可以直接使用Angular官方公开API reflectComponentType 获取组件元数据，不需要操作DOM，支持Angular 9+所有版本：

import { Component, reflectComponentType, Type } from '@angular/core';

@Component({
  selector: 'base-comp',
  template: '<div>hello</div>'
})
export class BaseComponent {
  /**
   * 获取当前组件（含子类覆写后）的模板内容
   * @param compType 组件类，默认取当前实例的构造类
   * @returns 内联模板字符串，templateUrl引用的模板在AOT编译后也会被转为内联模板返回
   */
  getTemplate(compType: Type<any> = this.constructor as Type<any>): string | null {
    const mirror = reflectComponentType(compType);
    return mirror?.template ?? null;
  }

  someMethod() {
    const currentTemplate = this.getTemplate();
    // 这里即可拿到模板字符串
    console.log(currentTemplate); // 输出 <div>hello</div>
  }
}

注意：该方法拿到的是编译后的模板字符串，如果你用了templateUrl，JIT模式下会返回templateUrl路径而非模板内容，生产环境AOT编译下会返回完整的内联模板字符串。

公共加载/错误态逻辑收敛实现方案 #

你最初通过Renderer2手动拼接DOM挂载到ElementRef的方案存在明显缺陷：手动插入的原生DOM不会经过Angular编译，事件绑定、指令、变更检测都无法正常工作，且不兼容服务端渲染。更推荐以下符合Angular设计范式的实现：

推荐方案：基类+动态组件（零侵入子类模板） #

完全不需要修改现有子类的业务代码，只需要两步即可把公共HTML、CSS、交互逻辑收敛到基类：

1. 先封装独立的状态遮罩组件，把加载、错误态的所有视图、样式、交互逻辑封装在内：

// state-mask.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-state-mask',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="state-mask" *ngIf="loading || error">
      <div class="loading-box" *ngIf="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
      <div class="error-box" *ngIf="error">
        <p>{{ errorTip }}</p>
        <button (click)="retry.emit()">重新加载</button>
      </div>
    </div>
  `,
  styles: [`
    .state-mask {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.95);
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #1677ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 8px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .error-box button {
      padding: 4px 12px;
      background: #1677ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `]
})
export class StateMaskComponent {
  @Input() loading = false;
  @Input() error = false;
  @Input() errorTip = '加载失败，请稍后重试';
  @Output() retry = new EventEmitter<void>();
}

2. 在基类中动态创建该遮罩组件，自动同步状态，子类无需修改任何模板代码：

import { Component, HostBinding, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';
import { StateMaskComponent } from './state-mask.component';

@Component({
  selector: 'base-comp',
  template: '<div>hello</div>',
  standalone: true
})
export class BaseComponent implements OnDestroy {
  // 自动给宿主元素加相对定位，保证遮罩绝对定位生效
  @HostBinding('style.position') hostPosition = 'relative';
  // 公共状态，子类直接修改属性即可控制遮罩
  loading = false;
  error = false;
  errorTip = '';

  private maskComp: ComponentRef<StateMaskComponent> | null = null;

  constructor(
    protected vcr: ViewContainerRef
  ) {}

  ngOnInit(): void {
    // 动态挂载遮罩组件到当前组件视图
    this.maskComp = this.vcr.createComponent(StateMaskComponent);
    this.syncMaskState();
  }

  /**
   * 同步基类状态到遮罩组件，子类修改状态后调用即可更新视图
   * 也可以通过给loading/error属性加getter/setter自动触发，不需要手动调用
   */
  protected updateState(partial: Partial<Pick<BaseComponent, 'loading' | 'error' | 'errorTip'>>) {
    Object.assign(this, partial);
    this.syncMaskState();
  }

  private syncMaskState() {
    if (!this.maskComp) return;
    const instance = this.maskComp.instance;
    instance.loading = this.loading;
    instance.error = this.error;
    instance.errorTip = this.errorTip || '加载失败，请稍后重试';
    // 统一绑定重试事件，子类可覆写onRetry方法实现自定义重试逻辑
    instance.retry.subscribe(() => this.onRetry());
    this.maskComp.changeDetectorRef.detectChanges();
  }

  protected onRetry() {
    this.updateState({ error: false, loading: true });
    // 此处可添加统一的请求重试逻辑
  }

  // 原有公共方法：日期解析、格式化等逻辑保留即可
  protected formatDate() {}
  protected parseDate() {}

  ngOnDestroy(): void {
    this.maskComp?.destroy();
  }
}

方案说明

• 子类只需要继承BaseComponent即可自动获得遮罩能力，不需要修改自身模板，不需要在构造函数中额外声明依赖（如果子类自定义了构造函数，只需要注入ViewContainerRef并传入super()即可）
• 遮罩的所有HTML、CSS、交互逻辑全部收敛在StateMaskComponent中，后续修改只需要调整这一处
• 完全走Angular渲染流程，支持变更检测、样式隔离、服务端渲染，没有原生DOM操作的兼容问题

轻量替代方案（少量侵入） #

如果不介意给需要遮罩的组件加一层模板包裹，可以直接封装一个布局容器组件，业务内容通过ng-content投射，代码更简单，不需要动态创建组件：

<!-- 子类模板示例 -->
<app-page-container [loading]="loading" [error]="error" (retry)="fetchData()">
  <!-- 原有业务代码全部放在容器内部 -->
  <div>业务内容</div>
</app-page-container>

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