如何在Angular中关闭ng-bootstrap模态

Question

我有两个组件，分别是组件A，组件B和在组件A中，我打开了ng-bootstrap模型，它的工作正常，问题是当我点击关闭按钮时，我想得到理由以解散那些在组件中处理的功能-一种

但是组件B中有我的关闭按钮动作，我该如何处理这种情况，请有人帮我。

ComponentA：

public open() {
    this.modalService.open(ComponentB, { ariaLabelledBy: 'modal-basic-title', size: 'lg' }).result.
      then((result) => {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

以componentB：

 close(){
    this.activeModel.close()
  }

CoponentB.html

<!--  Model Code Start -->
  <div class="modal-header" style="background: deepskyblue; font-size: xx-large;">
    <h4 class="modal-title" id="modal-basic-title">Registration & SignIn</h4>
    <button type="button" class="close" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <!--  Model Body -->
  <div class="modal-body">
    <!-- Tab Start Code -->
    <ngb-tabset>
      <ngb-tab>
        <ng-template ngbTabTitle><b>Login</b></ng-template>
        <ng-template ngbTabContent>
          <br>
          <form>
            <div class="form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">*</span>
                </div>
                <input type="password" class="form-control" placeholder="Password" aria-label="Username"
                  aria-describedby="basic-addon1">
              </div>
            </div>
            <button type="button" style="margin-left: 39%;" class="btn btn-outline-success" (click)="c('Save click')"><b>Login</b></button>
          </form>
        </ng-template>
      </ngb-tab>

      <ngb-tab>
        <ng-template ngbTabTitle><b>Register</b></ng-template>
        <ng-template ngbTabContent>
          <br>
          <form [formGroup]="registrationForm">
            <div class="form-group">
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlUserName" style="color: lightseagreen;font-size: medium;"><b>User Name*:</b></label>
                </div>
                <div class="col-md-6">
                  <input type="text" formControlName="UserName" placeholder="User Name" class="form-control" aria-label="Default"
                    aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="col-md-4">

                  <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['UserName'].valid&&registrationForm.controls['UserName'].dirty">
                    <span *ngIf="registrationForm.controls.UserName.errors.required">User Name is Required.</span>
                    <span *ngIf="registrationForm.controls.UserName.errors.minlength">User name minimum should be
                      length
                      of 3.</span>
                    <span *ngIf="registrationForm.controls.UserName.errors.maxlength">User name maximum should be
                      length
                      of 50.</span>
                  </span>

                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlPassword" style="color: lightseagreen;font-size: medium;"><b>Password*:</b></label>
                </div>
                <div class="col-md-6">
                  <input type="password" formControlName="Password" placeholder="Password" class="form-control"
                    aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="col-md-4">
                  <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Password'].valid&&registrationForm.controls['Password'].dirty">
                    <span *ngIf="registrationForm.controls.Password.errors.required">Password is Required.</span>
                    <span *ngIf="registrationForm.controls.Password.errors.minlength">Password minimum should be length
                      of 3.</span>
                    <span *ngIf="registrationForm.controls.Password.errors.maxlength">Password maximum should be length
                      of 50.</span>
                  </span>
                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlEmail" style="color: lightseagreen;font-size: medium;"><b>Email*:</b></label>
                </div>
                <div class="col-md-6">
                  <input type="email" formControlName="Email" placeholder="Email" class="form-control" aria-label="Default"
                    aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="col-md-4">
                  <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Email'].valid&&registrationForm.controls['Email'].dirty">
                    <span *ngIf="registrationForm.controls.Email.errors.required">Email is Required.</span>
                    <span *ngIf="registrationForm.controls.Email.errors.email">Email is not in correct pattern.</span>
                  </span>
                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlRole" style="color: lightseagreen;font-size: medium;"><b>Role*:</b></label>
                </div>
                <div class="col-md-6">
                  <!-- <input type="text" formControlName="Role" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
                  <select class="form-control" formControlName="Role" id="exampleFormControlSelect2">
                    <option [ngValue]="undefined">Select Role</option>
                    <option>Customer</option>
                    <option>Sellers</option>
                    <option>Tech Support</option>
                    <option>CSE</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Role'].valid&&registrationForm.controls['Role'].dirty&&registrationForm.controls['Role'].touched">
                    <span *ngIf="registrationForm.controls.Role.errors.required">Role is Required.</span>
                  </span>
                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlPhone" style="color: lightseagreen;font-size: medium;"><b>Phone No*:</b></label>
                </div>
                <div class="col-md-6">
                  <input type="text" formControlName="Phone" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="col-md-4">
                  <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Phone'].valid&&registrationForm.controls['Phone'].dirty">
                    <span *ngIf="registrationForm.controls.Phone.errors.required">Phone is Required.</span>
                  </span>
                </div>
              </div>
              <br>
              <div class="row">
                <div class="col-md-2">
                  <label for="FormControlGender" style="color: lightseagreen;font-size: medium;"><b>Gender:</b></label>
                </div>
                <div class="col-md-6">
                  <!-- <input type="text" formControlName="Gender" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
                  <select class="form-control" formControlName="Gender" id="exampleFormControlSelect1">
                    <option>Select Gender</option>
                    <option>Male</option>
                    <option>Female</option>
                    <option>Not prefer to dislose</option>
                  </select>
                </div>
                <div class="col-md-4">

                </div>
              </div>
            </div>
            <button type="button" style="margin-left: 39%;" [disabled]="!registrationForm.valid" class="btn btn-outline-success"
              (click)="OnRegister(registrationForm.value)"><b>Register</b></button>
          </form>

        </ng-template>
      </ngb-tab>
    </ngb-tabset>
    <!-- Tab End Code -->
  </div>

  <!--  Model Footer -->
  <div class="modal-footer">
    <p *ngFor="let alert of alerts">
      <ngb-alert style="width: 758px;" [type]="alert.type" (close)="staticAlertClosed = true">{{ alert.message }}</ngb-alert>
    </p>
  </div>

Answer 1

逻辑上，您的组件B应该是这样的

class ComponentB {
   constructor(private activeModal: NgbModal){ }

   /* close modal instance */
   close(){ this.activeModal.dismissAll('Reason');} // the component you pass in modalService as container should have NgbModal in constructor
}

成分A

 let instance = modalService.show(ComponentB, 'Template-Path-to-HTML'); instance.result.then(() => { /* success */}, (reason) => { /* Reason should be here :-)*/})