Javascript 不重新加载的布线在角度2下不工作

我的员工管理组件在交互时使用路由参数链接到自身时正在重新加载，这不应该发生。我的代码中有任何问题吗？

和

都是Priming的组件，它们的名称说明了它们的功能。EventHandler和属性也应该易于理解。如果不是，就问吧

 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()}
    );
}

所有内容都会按需要加载，但如果我单击某个员工

routeToEmployee

将我发送到

/employee/：employeeArrayIndex

，页面将重新加载（不应加载的内容）它在

editEmployee

中崩溃，我想将employees数组中选定的employees分配给可以显示他的Employeer变量。

---

错误消息是

'TypeError:无法读取未定义的'

的属性'0'。该数字表示员工应位于的数组索引。所以我假设在重新初始化之后数组是空的。只会再次调用

getDepartments（）

，但不再调用

getEmployees（）

。

您的意思是重新加载页面还是重新创建组件而不是重新使用？您的路由是什么样子的？请尝试将

，pathMatch:'full'

添加到此行

路径：“”，

路由器应该如何区分

路径：':type/:id'

和

路径：':type/:option'

？我认为路由需要区别的不仅仅是参数名。您是否尝试过删除这两个路由中的一个。路由器得到一个URL，必须决定选择哪条路由。URL不包含参数名，因此路由器没有任何信息可以让它做出决定。我想你需要在一个可以复制的Plunker中将代码减少到最低限度。您可以尝试

this.router.navigate（[this.findSelectedEmployeeIndex（）]，{relativeTo，this.route}）您的意思是重新加载页面还是重新创建组件而不是重复使用？您的路由是什么样子的？请尝试将
，pathMatch:'full'
添加到此行
路径：“”，
路由器应该如何区分
路径：':type/:id'
和
路径：':type/:option'
？我认为路由需要区别的不仅仅是参数名。您是否尝试过删除这两个路由中的一个。路由器得到一个URL，必须决定选择哪条路由。URL不包含参数名，因此路由器没有任何信息可以让它做出决定。我想你需要在一个可以复制的Plunker中将代码减少到最低限度。您可以尝试
this.router.navigate（[this.findSelectedEmployeeIndex（）]，{relativeTo，this.route}）
export const EmployeeManagementRoutes: RouterConfig = [
{
path: 'employee-management',
component: EmployeeManagementComponent,
children: [
  { 
    path: '',  
    component: EmployeeManagementTableComponent 
  },
  { 
    path: ':type/:id',  
    component: EmployeeManagementTableComponent 
  },
  { 
    path: ':type/:option',  
    component: EmployeeManagementTableComponent 
  },
]
}];