Angulaire 4 ngOnInit pas appelé après routeur.naviguer

J'ai 3 onglets un onglet affiche un tableau avec la liste des employés. Fonctionne bien quand il est chargé pour la première fois.ngOnInit Récupère des données à partir du serveur à l'aide de http get. Après cela, lorsque je clique sur ajouter un nouvel employé pour ouvrir un formulaire, qui prennent d'entrée de l'utilisateur et lorsque que soumettre est cliqué, j'appelle une fonction qui appelle la http service de poste à poste que des données sur mon serveur où il insère des enregistrements, puis après cela, il est redirigé vers l'employé composant, mais maintenant que l'employé composant est déjà chargé, je ne vois pas le nouveau dossier que j'ai inséré dans le tableau, à moins que je recompile mon code.

employé.composante.ts ( Qui charge la Table employee)

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

}

forme.composante.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']); }  
    );

}
}

employé.service.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 { }

Le problème c'est que je vais appeler mon API de ngOnInit qui charge parfaitement de la première fois que le composant charge. Lorsque je soumets le formulaire, il va à mon API et il est alors redirigé vers l'employé composant, mais les données ne sont pas mis à jour comme il se doit.

P. S : je suis désolé pour ces petits post. Je suis un peu nouveau sur ce site web.

Mise à jour :

Il a été plus d'un an maintenant, depuis que j'ai posté ce fil et je vois beaucoup de gens qui ont intérêt ou peut-être pas. Cependant, je tiens à souligner que j'ai déjà compris ce qui a provoqué l'erreur et je vais maintenant essayer de vous faire comprendre la solution.

Le concept le plus important de l'adapter ici est l'angle de Cycle De Vie Des Crochets.
Ce qui se passe est, nous l'appelons ngOnInit la première fois qu'un composant est chargé et cela va déclencher une seule fois lorsque l'angle d'application est amorcé. Ceci est similaire à un constructeur de la classe, mais il ne se déclenche une seule fois. Donc, vous ne devriez pas mettre n'importe quel DOM liées à des modifications ici. Vous devez comprendre Angulaire du Cycle de Vie des Crochets pour résoudre ce problème. Je n'ai pas de solution de travail avec moi, comme j'ai déménagé à Vuejs depuis les 8 derniers mois, mais dans peu de temps libre, je vais poster une mise à jour ici.

Va avoir besoin du code bro
il sera grille si vous pouviez poster ici quelques plunker avec démonstration de ce comportement
J'ai ajouté le code bro. Je suis désolé de ne pas le faire la première fois. @DanielCooke

OriginalL'auteur Viral Patel | 2017-06-02