(각도) 동적 매개 변수를 사용하여 라우팅

Question

department.component.html보기에서 행마다 확인란을 입력하므로 사용자는 삭제할 부서를 선택할 수 있습니다. department.component.ts에서

<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> 

는

가

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

삭제를 확인하는 쉬운 방법이 있습니다.

관찰 가능을 사용하여 확인시 구독 할 수 있습니다.

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 
    } 
    }