如何通过@ViewChild和AfterViewInit访问<ng-template>内元素并应用掩码？

错误原因 #

你遇到的报错核心原因是：<ng-template>是未渲染的模板容器，不会被解析到DOM中。你通过ViewChild获取到的Payment其实是Angular的TemplateRef对象，而非实际的DOM元素，所以它的nativeElement不具备querySelector这类DOM元素方法，自然会抛出类型错误。

正确实现方案 #

方案1：利用模态框生命周期钩子（推荐） #

模态框打开后，内部模板才会被渲染到DOM。你可以监听模态框的「打开完成」事件，在这时候再绑定掩码逻辑：

示例（以Angular Material MatDialog为例）

组件代码：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PaymentModalComponent } from './payment-modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openPaymentModal() {
    const dialogRef = this.dialog.open(PaymentModalComponent);
    // 监听模态框打开完成事件
    dialogRef.afterOpened().subscribe(() => {
      const priceInput = document.getElementById('price') as HTMLInputElement;
      priceInput.addEventListener('keyup', function() {
        mask(this);
      });
    });
  }
}

如果是自定义模态框，可在显示后用setTimeout等待DOM更新：

showPaymentModal() {
  // 显示模态框的逻辑（比如设置display为block）
  document.getElementById('paymentModal').style.display = 'block';
  // 等待DOM渲染完成
  setTimeout(() => {
    const priceInput = document.getElementById('price') as HTMLInputElement;
    priceInput.addEventListener('keyup', function() {
      mask(this);
    });
  }, 0);
}

方案2：用自定义指令封装掩码逻辑（最符合Angular风格） #

创建一个掩码指令，让指令自动处理元素绑定，只要模板被渲染，指令就会生效：

1. 创建掩码指令：

import { Directive, ElementRef, OnInit } from '@angular/core';

// 假设mask函数全局可用，或在此处导入
declare function mask(el: HTMLInputElement): void;

@Directive({
  selector: '[appPriceMask]' // 自定义指令选择器
})
export class PriceMaskDirective implements OnInit {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  ngOnInit() {
    this.el.nativeElement.addEventListener('keyup', () => {
      mask(this.el.nativeElement);
    });
  }
}

2. 在模板中直接使用指令：

<ng-template #Payment>
  <input type="text" id="price" appPriceMask>
</ng-template>

这种方式无需手动操作DOM，Angular会自动在元素渲染后执行逻辑，维护性更强。

方案3：条件渲染替代ng-template（适合简单场景） #

如果模态框通过*ngIf控制显示，可把<ng-template>换成普通容器，直接用ViewChild获取输入框：

HTML：

<div *ngIf="isModalOpen" class="modal">
  <input type="text" id="price" #priceInput>
</div>

组件代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewChecked {
  isModalOpen = false;
  @ViewChild('priceInput', {static: false}) priceInput: ElementRef<HTMLInputElement>;
  private isMaskBound = false;

  openModal() {
    this.isModalOpen = true;
  }

  ngAfterViewChecked() {
    // 确保元素已渲染且只绑定一次掩码
    if (this.isModalOpen && this.priceInput && !this.isMaskBound) {
      this.priceInput.nativeElement.addEventListener('keyup', function() {
        mask(this);
      });
      this.isMaskBound = true;
    }
  }
}

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