router.navigate 后未调用 Angular 4 ngOnInit

Question

我有 3 个选项卡，其中一个选项卡显示一张包含员工列表的表格。第一次加载时效果很好。ngOnInit 使用 http get 从服务器获取数据。之后，当我单击“添加新员工”以打开一个表单，该表单接受用户的输入并单击该提交时，我调用一个函数，该函数调用 http post 服务将该数据发布到我的服务器，然后在其中插入记录它被重定向回员工组件，但现在员工组件已经加载，除非我重新编译我的代码，否则我看不到我插入表中的新记录。

employee.component.ts(加载员工表)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {

public employeeObj:any[] = [{emp_id:'',empname:'',joindate:'',salary:''}] ;
constructor(private employeService:EmployeeService) { }

ngOnInit() {    
this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
}

}

表单.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EmployeeService } from '../../employee.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.css'],

})
export class FormComponent implements OnInit {
empform;

ngOnInit() { 
this.empform = new FormGroup({
    empname: new FormControl(""),
    joindate: new FormControl(""),
    salary: new FormControl("")
})
} 
constructor(private employeeService: EmployeeService, private router:Router) 
{ }

 onSubmit = function(user){
    this.employeeService.addEmployee(user)
    .subscribe(
        (response) => { this.router.navigate(['/employees']); }  
    );

}
}

员工服务.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
@Injectable()
export class EmployeeService{
constructor(private http:Http){}
addEmployee(empform: any[]){
    return this.http.post('MY_API',empform);
}

getEmployees(){
    return 
this.http.get('MY_API').map((response:Response)=>response.json());
}
}

AppModule.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { EmployeeService } from './employee.service';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { ContainerComponent } from './container/container.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { EmployeesComponent } from './employees/employees.component';
import { CompaniesComponent } from './companies/companies.component';
import { InternsComponent } from './interns/interns.component';
import { FormComponent } from './employees/form/form.component';
import { ComformComponent } from './companies/comform/comform.component';
import { InternformComponent } from './interns/internform/internform.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavComponent,
    ContainerComponent,
    DashboardComponent,
    EmployeesComponent,
    CompaniesComponent,
    InternsComponent,
    FormComponent,
    ComformComponent,
    InternformComponent
  ],
  imports: [    
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot([
            {
                path:'dashboard',
                component:DashboardComponent
            },
            {
                path:'employees',
                component:EmployeesComponent
            },
            {
                path:'companies',
                component:CompaniesComponent
            },
            {
                path:'interns',
                component:InternsComponent
            },
            {
                path:'addemployee',
                component:FormComponent
            },
            {
                path:'comform',
                component:ComformComponent
            },
            {
                path:'internform',
                component:InternformComponent
            }       
      ])
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是我从 ngOnInit 调用我的 API，它在组件第一次加载时完美加载。当我提交表单时，它转到我的 API，然后它被重定向回员工组件，但数据没有按预期更新。

P.S:我很抱歉发这么小的帖子。我是这个网站的新手。

更新:

自从我发布这个话题已经一年多了，我看到很多人从中受益，也许没有。不过，我想指出，我已经了解导致错误的原因，现在我将尝试让您了解解决方案。

这里要适应的最重要的概念是 Angular Life Cycle Hooks .发生的事情是，我们在第一次加载组件时调用 ngOnInit 并且它只会在引导 Angular 应用程序时触发一次。这类似于类构造函数，但它只触发一次。所以你不应该在这里放置任何与 DOM 相关的修改。你应该了解 Angular Life Cycle Hooks 来解决这个问题。自从过去 8 个月以来我搬到了 Vuejs，但我没有一个可行的解决方案，但在一些空闲时间我会在这里发布更新。

Answer 1

请尝试在employee 组件中添加router 事件。这样每次 /employee url state 被路由时，它都会获取员工详细信息。

employee.ts 组件

constructor(private employeeService: EmployeeService, private router:Router) 
{ }

ngOnInit() {    
  this.router.events.subscribe(
    (event: Event) => {
           if (event instanceof NavigationEnd) {
                this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
           }
    });
}