我有一个我正在使用的组件，其中包含一个记录表。该表中的每一行都有一个编辑按钮，允许通过模态编辑内容。
我在我的函数中抛出了一个console.log，它呈现了我的模态的内容，我注意到了一些奇怪的行为。每次我打开一个关闭模态，我的console.log似乎每次点击都会激活一个额外的时间。例如，在加载时，我点击Edit。 console.log('test');中的结果。如果我关闭模态并再次单击编辑（清除控制台），我会得到两个console.log('test');实例。
我有点怀疑某些事情是不能正常工作而且被解雇的次数超过应有的程度。
结果表组件：
<!-- Loading Indicator -->
<div *ngIf="!exceptions" class="loader" align="center">
<img src="images/loading-bars.svg" alt="" />
</div>
<!-- Loading Indicator -->
<!-- Active Exceptions -->
<span *ngIf="exceptions">
<table class="table table-condensed" *ngIf="exceptions.activeExceptions">
<thead>
<tr>
<th class="small">Employee</th>
<th class="small">Start Date</th>
<th class="small">End Date</th>
<th class="small">Exception Outcome</th>
<th class="small">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of exceptions.activeExceptions.data">
<td [innerHtml]="e.EmpNTID | ntidLink"></td>
<td class="small">{{ e.ExceptionStartDate }}</td>
<td class="small">{{ e.ExceptionEndDate === '2050-12-31' ? 'Indefinitely' : e.ExceptionEndDate }}</td>
<td class="small"><strong>{{ e.Value }}</strong></td>
<td class="small">
<button type="button" class="btn btn-default btn-xs" (click)="doEditException(e)">
<i class="fa fa-pencil"></i> Edit Exception
</button>
</td>
</tr>
</tbody>
</table>
<!-- Active Exceptions -->
<!-- No Active Exceptions -->
<span *ngIf="!exceptions.activeExceptions">
<div class="alert alert-warning"><i class="fa fa-comment padRight"></i>No Active Exceptions</div>
</span>
<!-- No Active Exceptions -->
</span>
与此表数据相关联的组件：
export class ActiveExceptionsComponent implements OnInit {
@Input() exceptions: any;
@Output() doEdit:EventEmitter<any> = new EventEmitter();
constructor(
public bsModalRef: BsModalRef,
private modalService: BsModalService,
private _mapsService: MapsService,
) {
}
ngOnInit() {
//
}
/**
* On "Edit" of an exception, trigger our modal.
* The modal will include its own component.
*
* @param {any} $event
* @memberof ExceptionsComponent
*/
doEditException($event) {
// Call our modal, pass the EditExceptionModalComponent
this.bsModalRef = this.modalService.show(EditExceptionModalComponent);
// Call next on our behavior subject to update the modal subscriber data
this._mapsService.updateExceptionModalData({
event: $event,
exceptionTypes: this.exceptions.exceptionTypes
});
}
编辑按钮单击绑定到doEditException方法，并使用另一个组件加载模态的内容。
模态组件：
export class EditExceptionModalComponent implements OnInit {
exceptionForm: FormGroup;
modalData: any;
// Configuration for the date pickers
datesConfig = {
'format': 'YYYY-MM-DD',
'placeholder': 'Choose a date...'
}
constructor(
private fb: FormBuilder,
public bsModalRef: BsModalRef,
private _mapsService: MapsService,
) { }
ngOnInit() {
// Subscribe to the modal data received from the active/future exceptions component
this._mapsService.uiExceptionModalData.subscribe(
results => {
if (results) {
this.modalData = results;
this.renderForm();
}
}
);
}
/**
* Render the form for the contents of the modal
*
* @memberof EditExceptionModalComponent
*/
renderForm() {
console.log('here'); <---- Each time the parent component edit button is clicked, this method gets executed 1 more time than previous.
// Determine if this exception expires or not
let isIndefinite = (this.modalData.event.ExceptionEndDate == '2050-12-31' ? true : false);
// Render our modal form
this.exceptionForm = this.fb.group({
outcome: [[{ text: this.modalData.event.Value, id: this.modalData.event.MappedValue }]],
startDate: this.modalData.event.ExceptionStartDate,
endDate: [{ value: (!isIndefinite ? this.modalData.event.ExceptionEndDate : ''), disabled: (isIndefinite ? true : false) }],
indefinite: (isIndefinite ? '1' : ''),
exceptionUser: this.modalData.event.QID,
exceptionID: this.modalData.event.ExceptionID,
targetID: this.modalData.event.TargetID,
});
}
}
最后，模态内容的HTML：
<div *ngIf="modalData">
<div class="modal-header text-center">
<h4 class="modal-title">Edit Exception</h4>
<small>Editing rule exception for <strong>{{ modalData.event.EmpName }}</strong></small>
</div>
<div class="modal-body">
<form [formGroup]="exceptionForm" #f="ngForm">
<div class="form-group">
<label for="exceptionOutcome">Exception Outcome</label>
<ng-select formControlName="outcome" [allowClear]="false" [items]="getExceptionTypes()" placeholder="Select an Exception Outcome">
</ng-select>
</div>
<div class="form-group noBottomMargin">
<label for="exceptionStartDate">Start Date</label>
<input type="text" class="form-control input-sm" formControlName="startDate" [dpDayPicker]="datesConfig" theme="dp-material"
placeholder="Choose a Start Date">
</div>
<div class="form-group noBottomMargin">
<label for="exceptionEndDate">End Date</label>
<div class="input-group">
<input type="text" class="form-control input-sm" formControlName="endDate" [dpDayPicker]="datesConfig" theme="dp-material"
placeholder="Choose a End Date">
<div class="input-group-addon"><input type="checkbox" (click)="toggleIndefiniteCheckbox(true)" value="1" formControlName="indefinite" [value]="value" [attr.checked]="value" id="indefinitely"> Indefinitely</div>
</div>
</div>
<input type="hidden" formControlName="exceptionID">
<input type="hidden" formControlName="targetID">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
<button type="button" class="btn btn-primary" (click)="saveChanges(exceptionForm.getRawValue())">Save changes</button>
</div>
</div>
我担心的是每次加载模式时会多次调用renderForm方法，每次在父项中触发doEditException方法时，都会增加1。
我是否因未正确结束或重置某些内容而导致此行为？我的期望是，如果我点击我的父组件中的“编辑”按钮，我只会看到孩子中的renderForm方法只被调用一次。我的console.log在该方法中每次增加都不会出现这种情况。
答案 0 :(得分：1)
问题是您没有取消订阅结果订阅。您的模态被销毁时需要取消订阅。
在您的模态组件中
import { Subscription } from 'rxjs/Subscription';
// ....
private sub: Subscription;
ngOnInit() {
// Subscribe to the modal data received from the active/future exceptions component
this.sub = this._mapsService.uiExceptionModalData.subscribe(
results => {
if (results) {
this.modalData = results;
this.renderForm();
}
});
}
ngOnDestroy() {
// Unsubscribe here.
this.sub.unsubscribe();
}