从Angular中的子组件调用父组件函数
发布时间:2020-12-17 18:02:27 所属栏目:安全 来源:网络整理
导读:我试图调用我的close()函数,该函数位于Angular中子组件的父组件中. 这是我在Plunker上的代码,我试图导入组件并直接在我的子组件中调用该函数但是我收到此错误:无法读取未定义的属性’close’ 我怎样才能解决这个问题? 解决方法 我将尝试对您可能遇到的两种
我试图调用我的close()函数,该函数位于Angular中子组件的父组件中.
这是我在Plunker上的代码,我试图导入组件并直接在我的子组件中调用该函数但是我收到此错误:无法读取未定义的属性’close’ 我怎样才能解决这个问题? 解决方法
我将尝试对您可能遇到的两种情况给出完整的答案:
情况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); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Bash学习笔记(3)----变量与运算符
- Vim编译器的相关知识
- Scala Futures和java 8 CompletableFuture
- 使用axis2调用sap生成的webservice(带用户密码认证)
- java – Docker(LXC)容器中的JVM内存分配
- angular2,4拖拽排序插件ng2-dragula
- WebService学习总结(一)--WebService的相关概念
- AngularJs+BootStarp+fontAwesome打造个人展示页面
- scala – 在Play Framework 2.4.0中的I18n
- angular – FormControl.detectchanges – 为什么要使用dis