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

Question

父组件.tspublic 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我想要做的是当我点击子组件按钮时想要执行父test()函数。但是<app-child (eventfire)="test($event)">当我使用这部分主页组件时显示另一个单击此处按钮。但我不想显示另一个按钮。因为child.component.html按钮我已经显示在网格中现在我想在单击该按钮后要执行父测试（）如何解决这个问题？

Answer 1

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

在 中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