如何通过编程方式获取Angular组件的templateUrl？

你可以通过以下两种方式，在不手动维护额外变量的前提下获取组件的templateUrl：

方法1：使用Angular内部组件元数据（快速但需注意兼容性） #

Angular编译后会为组件类生成内部属性ɵcmp，其中包含所有组件元数据，包括templateUrl：

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

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
})
export class TestComponent {
  public getTemplateUrl(): string {
    return (TestComponent as any).ɵcmp.templateUrl;
  }
}

注意：ɵcmp是Angular的内部未公开API，未来版本可能发生变更，生产环境使用需谨慎评估兼容性风险。

方法2：通过反射API读取装饰器元数据（更稳定） #

利用Reflect API直接读取@Component装饰器定义的元数据，这种方式不依赖内部API，稳定性更高：

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

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
})
export class TestComponent {
  public getTemplateUrl(): string {
    const componentAnnotations = Reflect.getMetadata('annotations', TestComponent);
    if (componentAnnotations?.length) {
      return componentAnnotations[0].templateUrl;
    }
    return '';
  }
}

说明：默认Angular项目启用反射元数据支持，若项目通过compilerOptions.emitDecoratorMetadata: false禁用该项，此方法将无法生效。

内容的提问来源于stack exchange，提问作者M. Al Jumaily