（角度）使用動態參數進行路由

Question

在department.component.html視圖中，每行輸入一個複選框，以便用戶可以選擇要刪除的部門。

<tr *ngFor="let department of departments ;trackBy: trackId"> 
     <td> 
      <input type="checkbox" 
         (change)="getSelectedDepartmentID(department)" 
         [checked]="department.checked" 
         id="checkbox_{{department.id}}" 
      /> 
     </td> 
</tr> 

<!-- this is the delete button --> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <button type="button" 
       (click)="deleteSelectedDepartments()" 
       replaceUrl="true" 
       class="btn btn-danger btn-sm"> 
      <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete Department</span> 
     </button> 
     </div> 
    </div> 

在department.component.ts查看

的getSelectedDepartmentID功能旨在檢索用戶選擇要刪除的部門ID。

deleteSelectedDepartment旨在調用彈出組件來獲取用戶的確認。

getSelectedDepartmentID(department: any) { 

    var department_id: number; 
    department_id = department.id; 


    if (this.selectedDepartment == null || !this.selectedDepartment.hasOwnProperty(department_id)) { 
    this.selectedDepartment[department_id] = true; 
    } else if (this.selectedDepartment.hasOwnProperty(department_id)) { 
    if (this.selectedDepartment[department_id]) { 
    this.selectedDepartment[department_id] = false; 
    } else { 
    this.selectedDepartment[department_id] = true; 
    } 
    } //if else 

} 

deleteSelectedDepartments() { 

    for (var key in this.selectedDepartment) { 
    var value = this.selectedDepartment[key]; 
    if (value) { 

    this.router.navigate(['department-checkbox-delete'], { 
    queryParams: this.selectedDepartment 
    }); 

    } 
    } 

} 

問題出在「this.router.navigate」部分。由於selectedDepartment由一個鍵值對組成，我不知道如何將它添加到router.navigate方法，或者說route.ts文件。

我不是非常精通angularjs，剛開始。

Answer 1

有一種更簡單的方法來確認刪除。

您可以使用observable在訂單上進行確認。

confirmationObservable: Observable<object>; 

    private confirmationObserver: Observer<object>; 


    constructor() { 

     this.confirmationObservable = new Observable<any>((observer) => { 
      this.confirmationObserver = observer; 
     }) 

    } 

    deleteSelectedDepartments() { 

    for (const key in this.selectedDepartment) { 
     const value = this.selectedDepartment[key]; 
     if (value) { 

      this.deleteSubscription(value) 

     } 

     } 

    } 
    deleteSubscription(value: string) { 

    const self = this; 

    const subscription = 
     this.confirmationObservable.subscribe({ 
      next: (response: { status: string }) => { 
      subscription.unsubscribe(); 
      self.actionConfirmed.call(self, response.status, value); 
      } 
    }) 

    } 
    private actionConfirmed(status: string, value: string) { 
    console.log(status) 
    // deleting function call 
    } 


    //function onClick 
    confirmDeleteFromYourConfirmationModal(bool) { 
    if (bool) { 
     this.confirmationObserver.next({response: 'success'}) 
    } else { 
     // dissmiss modal 
    } 
    }