Angular按钮点击报错：_angular_core__WEBPACK_IMPORTED_MODULE_1__.ɵnov(...)不是函数

核心问题：模板引用变量与组件方法重名 #

你在模板里定义了模板引用变量 <upload-dialog #upload></upload-dialog>，变量名是upload；同时组件类里的点击触发方法也命名为upload()。Angular模板解析时会优先查找模板作用域内的变量，而非组件类的方法。所以点击按钮时，它尝试调用的是模板变量upload（即UploadComponent的实例），而不是你写的upload()方法——组件实例不是函数，自然会抛出类型错误。

解决方案：修改模板引用变量名 #

把模板里的引用变量改成和方法名不冲突的名称，比如#uploadDialog：

修改后的HTML模板：

<button (click)="upload()"> Upload File</button>
<upload-dialog #uploadDialog></upload-dialog>

同步更新组件类里的@ViewChild装饰器参数：

import { Component, ViewChild } from '@angular/core';
import { UploadComponent } from './upload/upload.component';

@Component({
  selector: 'app-something',
  templateUrl: './something.component.html'
})
export class SomethingComponent {
  @ViewChild('uploadDialog', { static: false }) uploadDialog: UploadComponent;

  upload(): void {
    this.uploadDialog.showUpload = true;
  }
}

验证修复 #

重新运行项目后，点击按钮会正确调用组件类的upload()方法，设置UploadComponent的showUpload属性，不会再出现类型错误。

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