Angular中viewChild返回Signal<ElementRef>而非Signal<Element>的问题

在@angular/core@19.1.3版本中，使用viewChild获取元素引用时，若未显式指定读取选项，返回的Signal会指向ElementRef包装对象（即{ nativeElement: Element }结构），而非直接的DOM元素本身，导致代码出现TypeScript报错与运行行为不一致的问题。

问题原因 #

viewChild默认的读取目标是ElementRef（Angular用于封装DOM元素的容器类），即便你在泛型中指定了DOM元素类型（如HTMLInputElement），默认仍会返回Signal<ElementRef<HTMLInputElement> | undefined>，而非直接指向元素的Signal。

解决方案 #

调用viewChild时添加read选项，明确指定要直接读取DOM元素类型：

input = viewChild<HTMLInputElement>("input", { read: HTMLInputElement })

修改后的完整代码 #

import {Component, signal, computed, viewChild} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h2>Cookie recipe</h2>

    <label>
      # of cookies:
      <input #input type="range" min="10" max="100" step="10" [value]="count()" (input)="update($event)" />
      {{ count() }}
    </label>

    <p>Butter: {{ butter() }} cup(s)</p>
    <p>Sugar: {{ sugar() }} cup(s)</p>
    <p>Flour: {{ flour() }} cup(s)</p>

    <button
      type="button"
      (click)="log()"
    >Log</button>
  `,
})
export class CookieRecipe {
  count = signal(10);
  // 添加read选项直接获取DOM元素
  input = viewChild<HTMLInputElement>("input", { read: HTMLInputElement })

  butter = computed(() => this.count() * 0.1);
  sugar = computed(() => this.count() * 0.05);
  flour = computed(() => this.count() * 0.2);

  update(event: Event) {
    const input = event.target as HTMLInputElement;
    this.count.set(parseInt(input.value));
  }

  log() {
    alert(`input: ${this.input()?.value}`) // 运行正常且TypeScript无报错
  }
}

bootstrapApplication(CookieRecipe);

修改后，this.input()会直接返回HTMLInputElement | undefined，此时访问value属性既符合TypeScript类型校验，也能正常获取元素值。

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