在 angular 中从父组件模态确定按钮提交子组件

Question

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

Answer 1

每次您想从父组件处理子组件中的操作，例如提交，您有两种选择，一种是创建服务，另一种是订阅 actionStatus 属性

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

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

child.component.ts

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

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

或者可以通过创建 ViewChild

从父组件调用子组件方法的另一种方式

parent.component.html

<child #childComponent></child>

parent.component.ts

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

child.component.ts

doAction() {
      // your code
}

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

在 angular 中从父组件模态确定按钮提交子组件

Submit child component from parent component modal ok button in angular

bootstrap-modal

angular-components

angular