我有两个组件，分别是组件A，组件B和在组件A中，我打开了ng-bootstrap模型，它的工作正常，问题是当我点击关闭按钮时，我想获得取消这些功能的理由在Component-A
中处理但是组件B中有我的关闭按钮动作，我该如何处理这种情况，请有人帮忙。
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}`;
}
}
close(){
this.activeModel.close()
}
<!-- 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">×</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&®istrationForm.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&®istrationForm.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&®istrationForm.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&®istrationForm.controls['Role'].dirty&®istrationForm.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&®istrationForm.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>
答案 0 :(得分：0)
从逻辑上讲，您的组件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
}
let instance = modalService.show(ComponentB, 'Template-Path-to-HTML');
instance.result.then(() => { /* success */}, (reason) => { /* Reason should be here :-)*/})