Angular 4 ngOnInit не вызывается после router.navigate

Попробуйте добавить событие router в компонент employee. Таким образом, каждый раз, когда маршрутизируется состояние /employee url, он будет получать данные о сотруднике.

компонент 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);
           }
    });
}

Как правило, при маршрутизации угловой маршрутизатор будет повторно использовать один и тот же экземпляр компонента, если это возможно.

Так, например, переход от /component/1 к /component/2, где URL-адрес сопоставлен с одним и тем же компонентом (но с разными параметрами), приведет к тому, что маршрутизатор создаст экземпляр Component при переходе к /component/1, а затем повторно использует тот же экземпляр. когда вы перейдете к /component/2. Судя по тому, что вы описываете (где ngOnInit вызывается только один раз), кажется, что это именно то, с чем вы сталкиваетесь. Трудно сказать наверняка, не увидев свои шаблоны и конфигурацию маршрута. Я знаю, что вы говорите, что ваш URL-адрес меняется с /employees на /form, но это может не иметь значения, в зависимости от того, как настроены ваши шаблоны и конфигурация маршрута. Вы можете опубликовать этот код (свои шаблоны и конфигурацию маршрутизатора) здесь для изучения, если хотите.

Если этого не сделать, существует еще один вариант: маршрутизатор предоставляет все свои события в виде потока. Таким образом, вы можете подписаться на этот поток и действовать в соответствии с ним, а не просто полагаться на ngOnInit.

В вашем employee.component.ts

.....
export class EmployeesComponent implements OnInit {

.....

ngOnInit() {


   this.router.events
              // every navigation is composed of several events,
              // NavigationStart, checks for guards etc
              // we don't want to act on all these intermediate events,
              // we just care about the navigation as a whole,
              // so only focus on the NavigationEnd event
              // which is only fired once per router navigation
              .filter(e => e instanceof NavigationEnd)
              // after each navigation, we want to convert that event to a call to our API
              // which is also an Observable
              // use switchMap (or mergeMap) when you want to take events from one observable
              // and map each event to another observable 
              .switchMap(e => this.employeeService.getEmployees())
              .subscribe(res => this.employeeObj = res);    
}

ИЗМЕНИТЬ

Я вижу один странный код:

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(user){   // <--  change this line
    this.employeeService.addEmployee(user)
    .subscribe(
        (response) => { this.router.navigate(['/employees']); }  
    );

  }
}

Но в целом вы говорите, что если вы перейдете к компоненту сотрудника, затем к компоненту формы, а затем обратно к компоненту сотрудника, когда вы нажмете компонент сотрудника во второй раз, список сотрудников не обновится.

Можете ли вы использовать операторы console.log, чтобы гарантировать, что ngOnInit вызывается несколько раз в приведенном выше потоке экрана? Потому что, в зависимости от конфигурации вашего маршрутизатора, когда вы переходите к списку сотрудников для формирования и обратно, компонент вашего сотрудника должен быть повторно инициализирован (путем повторного вызова ngOnInit)

Я думаю, что это происходит, когда ваш маршрутный вызов находится за пределами жизненного цикла Angular, потому что вы правильно выполняете асинхронный вызов?

Сначала проверьте, отображается ли в вашем журнале что-то вроде этого:

WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'

Если это так, решение действительно простое, вы должны указать Angular вызвать вашу директиву маршрутизации внутри их жизненного цикла.

Следующий код должен исправить вашу проблему:

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

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

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

добавьте следующую строку в EmployeesComponent

ionViewWillEnter(){
  this.ngOnInit();
}

он будет вручную вызывать ngOnInit после перенаправления

Когда ваш компонент связан с маршрутом, лучше добавить свой код в конструктор, подписавшись на параметры ActivatedRoute и принудительно обнаружив изменения, например:

constructor(private route: ActivatedRoute, private changeDetector: ChangeDetectorRef) {
    super();
    this.route.params.subscribe((data) => {
    */update model here/*
    this.changeDetector.detectChanges();
   } 
}

Если вы переходите на более раннюю версию @ angular / router @ 4.1.3, похоже, работает там, где на routerLink, если вы перейдете, он вызовет ngOnInit

Убедитесь, что у вас есть <route-outlet></route-outlet> внутри app.component.html. Это должно нормально работать с последней версией Angular 5.

1. импортировать компонент, по которому нужно перемещаться

eg. import { SampleComponent} from './Sample.component';

2.Добавьте компонент в конструктор для навигации

constructor( private Comp: SampleComponent){}

3. Добавьте этот код туда, где вам нужно перемещаться

this.Comp.ngOnInit();
this._router.navigate(['/SampleComponent']);--/SampleComponent-your router path

например, после вставки сотрудника перенаправляет на страницу со списком сотрудников.

 this.service.postData(Obj)
          .subscribe(data => {
            (alert("Inserted Successfully"));
            this.Comp.ngOnInit();
            this._router.navigate(['/SampleComponent']);
          },
            error => {
              alert(error);
          });