Angular中ng-template内Canvas元素始终为null，如何正确获取？

问题原因 #

ng-template是惰性模板容器，默认不会渲染内部DOM结构。在ngOnInit钩子执行时，模板内的<canvas>还未被创建，因此@ViewChild获取到的元素为null。只有当通过ngTemplateOutlet、*ngIf等指令触发模板渲染后，内部元素才会被实例化。

解决方案 #

方案1：使用ngTemplateOutlet主动渲染模板

修改模板代码，通过ngTemplateOutlet渲染ng-template内容：

<ng-template #signatureTemplate>
  <canvas #canvas width="400" height="300"></canvas>
</ng-template>

<!-- 渲染模板内容 -->
<ng-container *ngTemplateOutlet="signatureTemplate"></ng-container>

组件代码中，在ngAfterViewInit钩子（DOM渲染完成后）初始化SignaturePad，并将@ViewChild的static设为false：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import SignaturePad from 'signature_pad';

export class AppComponent implements AfterViewInit {
  @ViewChild("canvas", { static: false }) canvas: ElementRef;
  sig: SignaturePad;

  ngAfterViewInit() {
    this.sig = new SignaturePad(this.canvas.nativeElement);
  }
}

方案2：动态控制模板渲染（如点击显示）

如果需要动态触发模板渲染（比如按钮点击），可以通过*ngIf结合@ViewChild的setter监听元素创建：

模板代码：

<button (click)="showSignature = true">显示签名板</button>

<ng-template #signatureTemplate>
  <canvas #canvas width="400" height="300"></canvas>
</ng-template>

<ng-container *ngIf="showSignature; then signatureTemplate"></ng-container>

组件代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import SignaturePad from 'signature_pad';

export class AppComponent {
  showSignature = false;
  sig: SignaturePad;

  @ViewChild("canvas", { static: false }) 
  set canvas(canvasEl: ElementRef) {
    // 当canvas元素被创建后，自动初始化签名板
    if (canvasEl) {
      this.sig = new SignaturePad(canvasEl.nativeElement);
    }
  }
}

关键注意点 #

• 必须触发ng-template的渲染，内部DOM元素才会被创建
• 避免在ngOnInit中初始化依赖动态DOM的组件，改用ngAfterViewInit或@ViewChild setter
• @ViewChild的static属性需设为false，确保能捕获到动态渲染的元素

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