从角的父组件模态“确定"按钮提交子组件

问题描述

我是新手.我有两个组成部分，一个是父组件，另一个是子组件.父组件具有模态.子组件是在父组件的模态"中打开的表单.现在，我想知道在单击父组件Modal的确定"按钮时如何提交子组件表单.

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

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