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

Question

父组件.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

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

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

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

Answer 1

output您可以使用和来实现这一点EventEmitter。更新以下代码：在 中parent.component.html，添加子选择器及其触发的事件：<app-child&nbsp;(clicked)="test()"></app-child>添加方法parent.component.ts：testtest(){ &nbsp;&nbsp;&nbsp;&nbsp;alert('parent&nbsp;function&nbsp;called&nbsp;from&nbsp;child!') &nbsp;&nbsp;}现在child.component.ts添加以下代码：@Output()&nbsp;clicked&nbsp;=&nbsp;new&nbsp;EventEmitter(); callParent(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.clicked.emit() &nbsp;&nbsp;}callParent单击按钮时触发方法：&nbsp;&nbsp;<button&nbsp;(click)="callParent()">&nbsp;click&nbsp;</button>这是工作示例：&nbsp;StackBlitz