如何从子组件调用父组件中的事件？

Question

我已经实现了选项卡，其中我在 tab1 中有一个表单和一个按钮。我在父组件中有一个事件，它使当前选项卡处于非活动状态而下一个选项卡处于活动状态。如何从子组件调用父组件中的事件？

  gotosecondtab(){
this.firsttabactive=false;
this.secondtabactive=true;
}

这是父组件中的事件...我想从子组件运行此事件

onSubmit(): void {  
console.log('you submitted value: ', this.myForm.value); 
//How to call the parent event here
}

我想在执行 onSubmit() 事件时运行 gotosecondtab() 事件...请有人帮助我

Answer 1

您可以在子组件中创建自定义事件

@Component({
  selector: 'child',
  (...)
})
export class ChildComponent {
  @Output() myevent: EventEmitter;

  constructor() {
    this.myevent = new EventEmitter();
  }

  onSubmit(): void {  
    console.log('you submitted value: ', this.myForm.value); 
    this.myevent.emit();
  }
}

并从父组件注册：

@Component({
  template: `
    <child (myevent)="gotosecondtab()"></child>
  `,
   directives: [ ChildComponent ]
  (...)
})
export class ParentComponent {
  (...)

  gotosecondtab() {
  }
}

希望对你有帮助， 蒂埃里