Angular 5：通过ngBootstrap模态框关闭按钮控制复选框选中状态

嘿，我来帮你搞定这个ngBootstrap模态框的需求！你想要点击模态框的关闭按钮时，通过这个关闭操作来决定复选框是否被选中对吧？下面是具体的实现步骤，直接就能用：

1. 补全并修改模态框的HTML代码 #

首先把你的模态框代码补全，加上复选框，同时把关闭按钮的点击事件改成调用我们自定义的方法，而不是直接用ngBootstrap自带的d()方法：

<!-- 页面上的复选框，双向绑定到组件变量 -->
<input type="checkbox" [(ngModel)]="termsAccepted" id="terms-checkbox">
<label for="terms-checkbox">我已阅读并同意服务条款</label>

<!-- 服务条款模态框模板 -->
<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Terms of service.</h4>
    <!-- 右上角叉号按钮，调用自定义关闭方法 -->
    <button type="button" class="close" aria-label="Close" (click)="handleModalClose(d)">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!-- 这里填充你的服务条款内容 -->
    这里是具体的服务条款文本...
  </div>
  <div class="modal-footer">
    <!-- 底部关闭按钮，同样调用自定义方法 -->
    <button type="button" class="btn btn-secondary" (click)="handleModalClose(c)">关闭</button>
  </div>
</ng-template>

<!-- 触发模态框的按钮 -->
<button class="btn btn-primary" (click)="open(content)">查看服务条款</button>

2. 组件TS逻辑实现 #

在你的Angular组件类里，添加变量和方法来处理模态框关闭逻辑，同时控制复选框的状态：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-terms-modal',
  templateUrl: './terms-modal.component.html',
  styleUrls: ['./terms-modal.component.css']
})
export class TermsModalComponent {
  // 绑定复选框的变量，默认未选中
  termsAccepted = false;

  constructor(private modalService: NgbModal) {}

  // 打开模态框的方法
  open(content: any) {
    this.modalService.open(content);
  }

  // 自定义的模态框关闭处理方法
  handleModalClose(closeFn: () => void) {
    // 这里写你的核心逻辑：根据关闭操作决定复选框状态
    // 示例1：只要关闭模态框，就自动勾选复选框
    this.termsAccepted = true;

    // 如果你需要反向逻辑：只有勾选了复选框才能关闭模态框，就用下面这段代码替换上面的示例1
    // if (this.termsAccepted) {
    //   closeFn(); // 同意了才关闭
    // } else {
    //   alert('请先阅读并同意服务条款哦'); // 提示用户
    //   return; // 不执行关闭
    // }

    // 执行模态框关闭（如果是上面的反向逻辑，这段就放到if里面）
    closeFn();
  }
}

关键说明 #

• 我们把原来直接调用d('Cross click')改成了自定义的handleModalClose方法，这样就能在关闭前插入我们的逻辑，控制复选框的状态。
• 用[(ngModel)]双向绑定复选框和组件里的termsAccepted变量，修改这个变量就能直接控制复选框是否选中。
• 两种逻辑都给你写好了，你可以根据实际需求选：要么关闭就自动勾选，要么必须勾选才能关闭。

内容的提问来源于stack exchange，提问作者Burst of Ice