Как обновить компонент в угловом

Ответ 1

После некоторого исследования и изменения моего кода, как показано ниже, скрипт работал для меня. Я только что добавил условие:

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

Ответ 2

Используйте this.ngOnInit(); для перезагрузки одного и того же компонента вместо перезагрузки всей страницы!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }

Ответ 3

Добавление этого кода в требуемый конструктор компонента сработало для меня.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it last link wasn't previously loaded
    this.router.navigated = false;
  }
});

Не забудьте unsubscribe от этой mySubscription в ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

Обратитесь к этой теме для получения более подробной информации - https://github.com/angular/angular/issues/13831

Ответ 4

К счастью, если вы используете Angular 5. 1+, вам больше не нужно реализовывать хак, так как была добавлена встроенная поддержка. Вам просто нужно установить onSameUrlNavigation для "перезагрузки" в параметрах RouterModule:

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload})],
 exports: [RouterModule],
 })

Дополнительную информацию можно найти здесь: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Ответ 5

Это может быть достигнуто с помощью взлома, перейдите к некоторому примерному компоненту и затем перейдите к компоненту, который вы хотите перезагрузить.

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);

Ответ 6

В моем приложении у меня есть компонент, и все данные поступают из API, который я вызываю в конструкторе Component. Есть кнопка, по которой я обновляю свои данные на странице. при нажатии кнопки я сохраняю данные в конце и обновляю данные. Поэтому, чтобы перезагрузить/обновить компонент - согласно моему требованию, нужно только обновить данные. если это также ваше требование, используйте тот же код, написанный в конструкторе компонента.

Ответ 7

Помоги мне

У меня есть компонент "UploadComponent", мне нужно перезагрузить.

как это сделать? SampleComponent?,

this.router.navigateByUrl('/SampleComponent', {skipLocationChange: true}); this.router.navigate([ "yourLandingComponent"]);

Ответ 8

Вы можете увидеть решение здесь. Это работает нормально для меня.

Ответ 9

KDO

// reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }

Ответ 10

constructor(private router:Router, private route:ActivatedRoute ) { 
}

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}

Ответ 11

Еще один способ без явного маршрута:

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

Ответ 12

Другой способ обновить (трудно) страницу в угловом 2, как это выглядит как f5

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}