不能在子组件上调用函数

Question

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

my Parent有以下代码

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 ERROR TypeError: Cannot read properties of undefined(读"onReload")at . onreload (main.js:1)在main.js: 1(main.js:1)(main.js:1)在HTMLButtonElement。(main.js: 1)在Q.invokeTask (polyfills.js:1)在对象。onInvokeTask (main.js: 1)在Q.invokeTask (polyfills.js:1)在Q.runTask (polyfills.js:1)

那么，我还缺少什么才能使这个工作呢?

Answer 1

经过更多的挖掘和事实，它似乎没有得到任何地方我弄清楚，我的问题在哪里。因为我很懒，只是为Angular材质表复制了一行@ViewChild，它使用了"我也错误地使用了它们"。引用子组件的正确语法只有导出组件的类名

@ViewChild(MatTableComponent) matGrid: MatTableComponent;

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