为了账号安全,请及时绑定邮箱和手机立即绑定

如何从子组件触发事件到父组件?

如何从子组件触发事件到父组件?

弑天下 2023-01-06 15:12:31

父组件.ts

public test(){ 
    //some code.....
}

父组件.html

<app-child (eventfire)="test($event)"></app-child>
  • 在此部分按钮显示子组件按钮显示父组件。但我已经在网格上显示了按钮。现在有两个按钮。网格按钮不工作但新显示按钮工作正常。

cild.compose.ts

  @Output() eventfire= new EventEmitter<string>(); 
   calltoParent(): void { 
      debugger;   
       this.eventfire.next();
  }

子组件.html

<button mat-raised-button (click) = calltoParent($event);>Click Here<button>//This already show in grid

http://img1.sycdn.imooc.com/63b7ca110001eb0a12580456.jpg

  • 我想要做的是当我点击子组件按钮时想要执行父test()函数。

  • 但是<app-child (eventfire)="test($event)">当我使用这部分主页组件时显示另一个单击此处按钮。但我不想显示另一个按钮。因为child.component.html按钮我已经显示在网格中

  • 现在我想在单击该按钮后要执行父测试()如何解决这个问题?


查看完整描述

1 回答

?
拉丁的传说

TA贡献1521条经验 获得超8个赞

output您可以使用和来实现这一点EventEmitter。更新以下代码:

在 中parent.component.html,添加子选择器及其触发的事件:

<app-child (clicked)="test()"></app-child>

添加方法parent.component.tstest

test(){
    alert('parent function called from child!')
  }

现在child.component.ts添加以下代码:

@Output() clicked = new EventEmitter();
callParent(){
     this.clicked.emit()
  }

callParent单击按钮时触发方法:

  <button (click)="callParent()"> click </button>

这是工作示例: StackBlitz


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信