我正在使用angular中的模态弹出窗口，其中涉及模态弹出窗口中的提交按钮。来自父组件的模态弹出调用。我有点击事件的按钮，这是提交按钮，但它没有得到触发。它应该记录当我点击提交按钮。

父html

<p>Start editing to see some magic happen :)</p>
 <button (click)="openModal(modal)" >open modal</button>
 <app-modal #modal [active]="isActive"> </app-modal>

modal. component. html//子组件

<div [hidden]="!active">
  
    <div class="modal-background">
    </div>
  
    <div  class="modal">
      <div class="modal-body">
       <h1>algun titulo</h1>
       <p>algun contenido</p>
       <button onSubmit="onSubmit()">
         Submit
       </button>
      </div>
    </div>
  
  </div>

modal.component.ts（子组件）

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: [ './modal.component.css' ]
})
export class ModalComponent implements OnInit {
  @Input() active: boolean ;

  ngOnInit() {
   
  }

  openModal(value) {
    value.active = true
  }

  onSubmit(){
    debugger;
    console.log('submit--->');
  }

  closeModal(value) {
    value.active = false
  }

}