javascript - リロードなしのルーティングが Angular 2 で機能しない

Question

Employee-Management-Component は、対話時にルート パラメータを使用してそれ自体にリンクするときにリロードされますが、これは発生しないはずです。コードに問題はありますか? <p-dropdown>と<p-datatable>は primeNGのコンポーネントであり、その名前が示すとおりに機能します。EventHandlers とプロパティも理解しやすい必要があります。ない場合は、尋ねてください。

 import ...

@Component({
selector: 'employee-management-table',
template: `


<div class="ui-g-12 ui-g-nopad" id="CONTENT">

    <nav class="ui-g-12 ui-g-nopad">
        <p-dropdown [options]="departments" [(ngModel)]="selectedDeparment" (onChange)="selectDepartment($event)"></p-dropdown>
    </nav>

    <p-dataTable [value]="employees" [(selection)]="selectedEmployees" (onRowClick)="routeToEmployee($event)">
        <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of columns" [field]="col.field" [header] = "col.header"></p-column>
    </p-dataTable>

    <employee-form [employee]="employee"></employee-form>
</div>

`,
styleUrls: [],
directives: [ROUTER_DIRECTIVES, EmployeeFormComponent, Dropdown, DataTable, Column],
})
export class EmployeeManagementTableComponent implements OnInit, OnDestroy{

private employees: Employee[];
private employee: Employee;
private newEmployee: boolean = false;
private selectedEmployees: Employee[];
private departments: SelectItem[] = [];
private selectedDepartment: string;
private columns: any[];
private paramSub: any;
private employeesSub: any;
private departmentSub: any;


constructor(private employeeManagementService: EmployeeManagementService, 
            private route: ActivatedRoute, 
            private router: Router,
            private ccs: ComponentCommunicatorService,
            private logger: Logger) { }

ngOnInit(){

    this.columns = [
    ....      
    ];

    this.selectedDepartment = this.ccs.getSelectedDepartment();
    this.getDepartments();

    this.paramSub = this.route.params.subscribe(
        //Success    
        params => {          
            if(params['type']){
                let type = params['type'];
                this.logger.log(type);
                if(type === "employee"){
                    if(params['option']){
                        let option = params['option'];
                        this.logger.log(option);
                        this.doEmployeeOption(option);

                    }else if(params['id']){
                        let id = params['id'];
                        this.logger.log(id);
                        this.editEmployee(id);
                    }
                }else if(type === "department"){
                    if(params['option']){
                        let option = params['option'];
                        this.logger.log(option);
                        this.doDepartmentOption(option);
                    }
                }
            }
        },
        //Error
        err => this.logger.error(err),
        //Complete
        () => { }
    );
}

ngOnDestroy(){
    this.paramSub.unsubscribe();
    this.employeesSub.unsubscribe();
    this.departmentDub.unsubscribe();
}


doEmployeeOption(option: String){

    switch(option){
    case 'new':
        this.newEmployee = true;
        this.employee = new Employee();
        break;
    case 'delete':

        break;
    default:
        this.logger.log("Default");
        break;
    }

}

save(){
    if(this.newEmployee){
        this.employees.push(this.employee);
        this.employeeManagementService.insertEmployee(this.employee);
        this.newEmployee = false;
    }else{
        this.employees[this.findSelectedEmployeeIndex()] = this.employee;
    }
    this.employee = null;
    window.history.back();
}

abort(){
    this.employee = null;
    window.history.back();
}

routeToEmployee(event){
    this.logger.log(event.data);
    this.employee = event.data;
    let link = ['/employee-management/employee', this.findSelectedEmployeeIndex()];
    this.router.navigate(link);
}

editEmployee(id: number){
    this.logger.log('edit '+id);
    for (let employee of this.employees) {
        this.logger.log("Edit: "+employee);
    }

    this.employee = this.employees[id];
    this.logger.log('check');



findSelectedEmployeeIndex(): number {

    this.logger.log("Method: "+this.employee);
    this.logger.log("Method: "+this.employees.indexOf(this.employee));
    return this.employees.indexOf(this.employee);
}

selectDepartment(event: any){
    this.ccs.setSelectedDepartment(event.value);
    this.getEmployees(this.ccs.getSelectedDepartment());
}

getDepartments(){

    this.departments.push({label: 'Alle', value: 'all'});

    this.departmentSub = this.employeeManagementService.getDepartments().subscribe(
          //Sucess
          data =>  {data.forEach((item, index) => {
                        this.departments.push({label: item, value: index.toString()});
                    });    
                   },
          //Error
          err => this.logger.error(err),
          //Complete
          () => {this.logger.log('done loading');
                 this.departmentSub.unsubscribe();
                 this.getEmployees(this.selectedDepartment);}
    );
}
getEmployees(department: any){

this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
          //Sucess
          data => {this.employees = data},
          //Error
          err => this.logger.error(err),
          //Complete
          () => {this.logger.log('done loading');
                /*for (let employee of this.employees) {
                    this.logger.log("Observable "+employee);
                }*/
                 this.employeesSub.unsubscribe()}
    );
}

ルート

export const EmployeeManagementRoutes: RouterConfig = [
{
path: 'employee-management',
component: EmployeeManagementComponent,
children: [
  { 
    path: '',  
    component: EmployeeManagementTableComponent 
  },
  { 
    path: ':type/:id',  
    component: EmployeeManagementTableComponent 
  },
  { 
    path: ':type/:option',  
    component: EmployeeManagementTableComponent 
  },
]
}];

すべてが必要に応じてロードされますが、従業員をクリックすると にrouteToEmployeeルーティングされ./employee/:employeeArrayIndex、ページがリロードされ (そうすべきではありません) editEmployee、従業員配列から選択した従業員を表示できる従業員変数に割り当てたい場所でクラッシュします. エラー メッセージは'TypeError: Cannot read property '0' of undefined'です。番号は、従業員が存在する配列インデックスです。したがって、再初期化後、配列は空であると想定します。getDepartments()再度呼び出されるだけで、getEmployees()もう呼び出されません。