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

Question

我想调用我的close()函数，该函数位于Angular的子组件中的父组件中。

这是我在Plunker代码，我想直接在我的子组件导入组件并调用该函数，但我得到这个错误：无法读取属性未定义

“关闭”我怎样才能解决这个问题？

Answer 1

我会尽量给一个完整的答案，这两种情况下，你可能会遇到：

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

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

所以在你的子组件，你得到了一个功能：

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

：

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

，并在你的父组件，你可以把它在你的父组件比方说，点击一个按钮就这样后

案例2：调用从子组件父功能

这是它给你的使用情况作为哟情况你可以在子组件中注入父组件并像上面那样做，但是这个关系不再是父子组件或子父组件，但是这两个组件都将强连接在一起，这是一种罕见的用例。或者，您可以通过使用@Output装饰器传递数据并在您的孩子中创建将消耗传入数据的函数，以非常简单的方式获得相同的结果。

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

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

在父模板

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

，然后在你的组件

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