角部件發射超過預期？

Question

我有一個我正在使用的組件，它包含一個記錄表。此表中的每一行都有一個編輯按鈕，允許通過模態編輯內容。

我在我的函數中拋出了一個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>&nbsp;&nbsp;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每次增加的情況。

Answer 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(); 
}