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

Question

父组件.ts

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

父组件.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() function。
• 但是<app-child (eventfire)="test($event)">当我使用这部分主页组件时会显示另一个单击此处按钮。 但我不想显示另一个按钮。 因为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