如何从父组件调用子组件中的方法？
如何从父组件调用子组件中的方法？
这个标题可能有点令人困惑。我的子组件在自己的模块中，使用的服务对于父组件不可用。
我想在点击按钮时更改子组件中的一些值，并且进行了一些试验，设置了如下内容。
@Component({
selector: 'app-parent-component'
template: `
`
})
export class ParentComponent{
refreshData() {
ChildComponent.runRefresh()
}
}
@Component({
selector: 'app-child-component'
template: ``
})
export class ChildComponent{
static runRefresh() {
console.log('refreshing')
// Do things involving data on a service scoped to this component/module
}
}
我想知道这种方法是否存在问题？是否有更好的解决方法？我对在NgOnChanges事件中检查变化很熟悉。
我想做的是从父组件中调用子组件内部的方法，该方法使用了子组件资源上的一个作用域服务。
编辑：还了解使用@ViewChild并且不将子组件的方法设为静态的。也许那是唯一的“正确”方式吗？
从父组件调用子组件的方法有多种方法。最简单的方法是编写一个提供事件的服务，在父组件中触发事件，在子组件中订阅该事件。
另一种方法是编写一个指令，该指令提供一个组件引用。将该指令附加到子组件上，并使用ViewChild在父组件中读取引用。然后可以直接调用子组件的方法。
为什么不直接使用ViewChild获取ChildComponent的引用呢？有两个原因：
1. ViewChild只能获取到子组件的实例，而不是子组件的引用。如果需要调用子组件的方法，仍然需要通过实例来调用。
2. 如果子组件在父组件初始化之前被创建，ViewChild可能会返回undefined，因此无法调用子组件的方法。
使用上述方法，可以轻松地从父组件调用子组件的方法，实现组件之间的通信。
问题的原因是在父组件中调用子组件的方法。解决方法是使用模板引用变量来引用子组件，并在父组件模板中直接调用子组件的方法。
在子组件中，如果runRefresh是一个公共方法，可以将其定义为公共方法：
export class ChildComponent{
public runRefresh() {
...
}
}
然后，在父组件的模板中使用模板引用变量来引用子组件，然后可以直接调用子组件的runRefresh方法：
<button (click)="child.runRefresh()" /> <app-child-component #child></app-child-component>
以上代码中，#child是一个模板引用变量，用于引用子组件。通过在button元素的click事件中调用child.runRefresh()，可以直接调用子组件的runRefresh方法。
点击此处的stackblitz可以查看一个演示示例。