从父组件模态确定按钮以角度提交子组件 [英] Submit child component from parent component modal ok button in angular

问题描述

我是 angular 的新手.我必须有两个组件，一个是父组件，另一个是子组件.父组件有一个 Modal.子组件是在父组件的 Modal 中打开的表单.现在我想知道如何在点击父组件Modal的OK按钮时提交子组件表单.

I am new to angular. I have to two component, one is parent and another is child component. Parent component has a Modal. Child component is a form which is open in the parent component's Modal. Now I would like to know how can I submit the child component form when clicking on parent component Modal's OK button.

推荐答案

每次你想从父组件处理子组件中的动作时，比如提交，你有两个选择，一个是创建服务，另一个是订阅 actionStatus 属性

each time you wanna handle action in child component from parent component like submit you have two choice one create service and subscribe to the actionStatus property

export class CtrlActionService {
  private actionStatus = new Subject<any>();

  constructor() {}

  //ctrl submit action
  public callAction() {
    this.actionStatus.next(true);
  }
  public getAction(): Observable<boolean> {
    return this.actionStatus.asObservable();
  }
}

parent.component.ts

parent.component.ts

onClickOkButton() {
  this.ctrlActionService.callAction()
}

child.component.ts

child.component.ts

ngOnInit() {
  this.ctrlActionService.getAction().subscribe(r => {
    if (r) {
      // your code
    }
  })
}

//////////////////////////////////////////////

////////////////////////////////////////////////

或者可以通过创建ViewChild从父组件调用子组件方法来做另一种方式

or can do another way with call child component method from parent component by create ViewChild

parent.component.html

parent.component.html

<child #childComponent></child>

parent.component.ts

parent.component.ts

@ViewChild('childComponent') childComponent: childComponent;
onClickOkButton() {
  this.childComponent.doAction();
}

child.component.ts

child.component.ts

doAction() {
      // your code
}

我只知道这两种方式，希望对你有用

i only know these two way and hope useful to you

这篇关于从父组件模态确定按钮以角度提交子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！