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

时间:2020-08-13 06:17:06

标签: javascript angular

parent.component.ts

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

parent.component.html

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

cild.componen.ts

  @Output() eventfire= new EventEmitter<string>();

  calltoParent(): void {
    debugger;
    this.eventfire.next();
  }

child.component.html

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

enter image description here

  • 我想做的是,当我单击要执行父 test()函数的子组件按钮时。
  • 但是当我使用零件主页组件时, 显示另一个点击此处按钮。但我不想显示另一个按钮。因为 child.component.html 按钮我已经显示在网格中
  • 现在我要在单击该按钮后想要执行父 test()的解决方法?

1 个答案:

答案 0 :(得分:3)

您可以使用outputEventEmitter来实现。更新以下代码:

parent.component.html中,添加带有触发事件的子选择器:

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

parent.component.ts中添加test方法:

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