如何在Angular编译前获取ng-template内容为字符串？

你的需求完全可行，核心思路是直接从DOM中提取ng-template元素的原始内容——因为Angular编译时只会将ng-template作为模板引用，不会渲染或修改它的innerHTML，所以我们可以通过原生DOM操作拿到未编译的模板字符串。

具体实现步骤 #

1. 通过ViewChild获取ng-template的DOM元素
   使用@ViewChild结合ElementRef获取目标ng-template对应的原生HTML元素，注意要指定{ read: ElementRef }来读取DOM节点，而不是默认的TemplateRef。

2. 提取并清理模板内容
   从DOM元素的innerHTML属性中获取原始模板字符串，再根据需求清理多余的空白、换行，得到整洁的代码格式。

代码示例 #

组件模板

<ng-template #exampleRef>
  <lib-input [formControl]="ctrl" label="Default" placeholder="Default"></lib-input>
</ng-template>

组件类

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-template-demo',
  templateUrl: './template-demo.component.html'
})
export class TemplateDemoComponent implements AfterViewInit {
  @ViewChild('exampleRef', { read: ElementRef }) templateElement!: ElementRef<HTMLElement>;
  ctrl = new FormControl('');

  ngAfterViewInit(): void {
    // 获取原始模板内容
    const rawContent = this.templateElement.nativeElement.innerHTML;
    
    // 清理格式：移除多余缩进和空行，保留必要换行
    const cleanedContent = rawContent
      .split('\n')
      .map(line => line.trim())
      .filter(line => line.length > 0)
      .join('\n');

    console.log(cleanedContent);
    // 输出结果：<lib-input [formControl]="ctrl" label="Default" placeholder="Default"></lib-input>
  }
}

注意事项 #

• 确保ng-template在DOM中存在：如果ng-template被*ngIf等指令动态移除，将无法获取其内容，需保证它始终处于DOM树中。
• 保留原始语法：这种方法获取的是模板的原始字符串，包括插值表达式、属性绑定等Angular语法，完全符合你查看渲染代码的需求。
• 嵌套模板处理：如果ng-template内部嵌套了其他ng-template，可以通过同样的方式获取内层模板的DOM元素，提取其内容。

进阶方案（编译前获取，适合库开发） #

如果需要在Angular编译阶段之前获取模板内容，可使用Angular编译器API（Compiler）动态编译组件并提取元数据，但这种方式复杂度较高，适合开发Angular库而非普通业务组件。常规场景下，上述DOM操作方法足够满足需求。

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