时间戳

首页 > 解决方案 > 无法在子组件上调用函数

angular - 无法在子组件上调用函数

问题描述

我在调用子组件上的函数时遇到问题，当我通过单击调用它时，我总是得到未定义的错误。

我的父母有以下代码

 import {MatTableComponent} from './mat-table/mat-table.component'
 @ViewChild('matGrid') matGrid: MatTableComponent;

  onReload(){
      console.log('User clicked Reload');
      this.matGrid.onReload()
    }

在我的孩子身上，我有一个简单的

  onReload() {
    console.log('User Requested Hit the component')
  }

当我点击我得到以下错误

main.js:1 错误类型错误：无法在 t.onReload (main.js:1) at main.js:1 at aA (main.js:1) at d (main.js:1) 处读取 undefined (reading 'onReload') 的属性。 js:1) 在 HTMLButtonElement。(main.js:1) 在 Q.invokeTask (polyfills.js:1) 在 Object.onInvokeTask (main.js:1) 在 Q.invokeTask (polyfills.js:1) 在 Q.runTask (polyfills.js:1) ) 在 Q.invokeTask [作为调用] (polyfills.js:1)

那么我缺少什么来完成这项工作？

标签： angulartypescript

解决方案

经过更多的挖掘以及似乎没有得到任何结果的事实，我发现''我的问题所在。因为我很懒，只是为 Angular Material 表复制了一行 @ViewChild 并且它使用了 '' 我也错误地使用了它们。引用子组件的正确语法只是组件的导出类名

@ViewChild(MatTableComponent) matGrid: MatTableComponent;

这样做解决了我的问题。有趣的部分是错误不是很具体，智能完成显示功能很好。

推荐阅读