从Angular中的子组件调用父组件函数

Question

我正在尝试调用Angular中子组件的父组件中的close()函数。

这是我在Plunker上的代码，我尝试导入组件并直接在我的子组件中调用该函数但是我收到此错误：无法读取未定义的属性'close'

我该如何解决这个问题？

Answer 1

我将尝试对您可能遇到的两种情况给出完整答案：

案例1： 从父组件调用子函数

您可以通过在子选择器上使用模板变量来引用父组件模板中的子组件，然后使用该引用调用任何公共函数或属性来实现此目的。

所以在你的子组件中，你有一个功能：

test(){
    console.log(`this is a test`);
}

并且在您的父组件中，您可以在父组件中调用它，让我们在点击按钮后说出：

<child-component #childRef></child-component>
<button (click)="childRef.test()">
    Call the child test function
</button>

案例2：从子组件调用父函数

这是一个由您的用例决定的情况，因为您可以在子组件中注入父组件并执行与上面相同的操作，但关系不再是父子或父子，而是两者都是组件将强烈链接在一起，这是一个罕见的用例。或者，您可以通过使用@Output装饰器传递数据并在您的孩子中创建将消耗传入数据的函数，以非常简单的方式获得相同的结果。

因此，在您的子组件中，您执行以下操作：

@Output() childEvent = new EventEmitter();
test(){
    this.childEvent.emit('this is a test');
}

在您的父模板中

<child-component (childEvent)="test($event)"></child-component>

然后在你的组件中

test(msg){
    console.log(msg);
}