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

Question

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

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

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