Angular模态框中提交按钮点击事件无法触发问题排查

核心问题：按钮事件绑定语法错误 #

你的模态框子组件中，提交按钮使用了原生HTML的onSubmit属性，这不是Angular的事件绑定方式，导致点击事件无法触发。

修改子组件HTML中的按钮代码：

<!-- 错误写法 -->
<button onSubmit="onSubmit()">Submit</button>

<!-- 正确写法 -->
<button (click)="onSubmit()">Submit</button>

次要问题：父组件状态变量未初始化 #

父组件HTML中绑定了[active]="isActive"，但未在父组件TS中定义并初始化该变量，会导致模态框初始状态异常。在父组件TS中添加：

isActive = false;

可选优化：遵循单向数据流原则 #

当前父组件直接调用子组件方法修改子组件属性，不符合Angular单向数据流规范。建议父组件自行维护isActive状态：

父组件TS代码： #

isActive = false;

openModal() {
  this.isActive = true;
}

父组件HTML修改： #

<button (click)="openModal()">open modal</button>
<app-modal [active]="isActive"></app-modal>

此时子组件可以移除openModal和closeModal方法，仅通过@Input() active接收状态控制显示，组件职责更清晰。

内容的提问来源于stack exchange，提问作者Shashank S Chandel