猿问

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

父组件.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按钮我已经显示在网格中

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


弑天下
浏览 116回答 1
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
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答