Angular中@ViewChild获取ElementRef报错：‘ElementRef仅指类型却被用作值’求助

这个报错其实很常见，咱们一步步来解决：

1. 首要原因：未导入ElementRef类 #

你看到的错误提示 'ElementRef' only refers to a type, but is being used as a value here，最直接的原因是你没有从@angular/core包中导入ElementRef类。

在@ViewChild的配置项{read: ElementRef}里，你是把ElementRef作为一个「值（类）」来传递的，但如果没导入，TypeScript只会把它当作一个类型标注，不知道它实际是一个可实例化的类，所以就会报错。

解决方法很简单，在组件文件的顶部加上这条导入语句：

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

2. 额外建议：ng-template更适合用ViewContainerRef获取 #

另外想提醒你：<ng-template>是Angular的模板容器，它本身不会被渲染到DOM中，所以用ElementRef大概率拿不到实际的DOM节点。如果你的需求是要操作这个模板的容器、动态插入内容之类的，更标准的做法是使用ViewContainerRef：

修改后的TS代码如下：

import { ViewChild, ViewContainerRef } from '@angular/core';

// 组件类内部
@ViewChild('addNodeDefinition', { read: ViewContainerRef }) editNodeModal: ViewContainerRef;

这样你就能通过ViewContainerRef提供的API（比如createEmbeddedView）来操作这个模板了，这也是Angular官方推荐的处理<ng-template>的方式。

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