（角度）使用动态参数进行路由

问题描述：

在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，刚开始。

答

有一种更简单的方法来确认删除。

您可以使用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 
    } 
    }

（角度）使用动态参数进行路由

相关推荐