javascript - 无需重新加载的路由在Angular 2中不起作用

Question

我的 Employee-Management-Component 在交互时使用路由参数链接到自身时正在重新加载，这不应该发生。我的代码有什么问题吗？<p-dropdown>和是 primeNG的<p-datatable>组件，按照他们的名字做。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()。