Angular 14结构指令如何获取原始内容并实现Markdown渲染？

核心问题分析 #

带*的结构指令会被Angular编译为<ng-template>包裹的形式，因此直接通过ElementRef或ViewChildren无法获取到指令内部的原始内容——这些API要么指向模板容器，要么在视图未渲染前查询不到任何元素。

解决方案 #

1. 获取原始模板内容 #

通过TemplateRef.elementRef.nativeElement.innerHTML获取模板的原始HTML，再用DOMParser解析提取宿主元素内部的Markdown混合内容。

2. 解析并渲染Markdown #

调用Markdown服务解析内容后，清空视图容器，创建新的元素（可复制原宿主元素的属性）并插入解析后的HTML。

修改后的指令代码 #

@Directive({selector: '[xyz]'})
export class MarkdownDirective implements OnInit, OnChanges {
  @Input() xyz!: string; // 接收语言控制参数

  constructor(
    private view: ViewContainerRef,
    private template: TemplateRef<any>,
    private renderer: Renderer2,
    private markdownService: MarkdownService
  ) {}

  ngOnInit(): void {
    this.processContent();
  }

  ngOnChanges(): void {
    // 语言参数变化时重新渲染内容
    this.processContent();
  }

  private processContent(): void {
    // 获取模板的原始HTML内容
    const templateHtml = this.template.elementRef.nativeElement.innerHTML;
    const parser = new DOMParser();
    const doc = parser.parseFromString(templateHtml, 'text/html');
    const originalHostEl = doc.body.firstElementChild;
    
    if (!originalHostEl) return;

    // 提取宿主元素内部的Markdown+HTML混合内容
    const rawContent = originalHostEl.innerHTML;

    // 解析Markdown为HTML
    const parsedHtml = this.markdownService.parse(rawContent);

    // 清空视图容器，避免残留内容
    this.view.clear();
    const containerEl = this.view.element.nativeElement;

    // 创建新的宿主元素，复制原元素的属性（如class、id等）
    const newHostEl = this.renderer.createElement(originalHostEl.tagName.toLowerCase());
    Array.from(originalHostEl.attributes).forEach(attr => {
      this.renderer.setAttribute(newHostEl, attr.name, attr.value);
    });

    // 设置解析后的HTML并插入容器
    this.renderer.setProperty(newHostEl, 'innerHTML', parsedHtml);
    this.renderer.appendChild(containerEl, newHostEl);
  }
}

生命周期时机说明 #

• ngOnInit：适合初始化时一次性处理内容，此时指令已完成初始化，TemplateRef可用。
• ngOnChanges：当语言参数（xyz输入属性）变化时触发，用于重新渲染对应语言的内容。
• 避免闪烁的关键：先清空容器再插入新内容，跳过原始模板的渲染步骤。如果在ngAfterViewInit处理，原始内容已渲染到DOM，替换时会出现明显闪烁，因此不建议使用该钩子。

为什么之前的ViewChildren无效？ #

结构指令的模板在未创建嵌入视图前，内部元素并未被渲染到DOM中，因此ViewChildren无法查询到任何子元素。我们的方案直接从模板的原始HTML提取内容，无需依赖视图渲染后的查询。

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