Angular 6 - Как перезагрузить текущую страницу?

Question

У меня есть страница для редактирования пользователя, внутри нее есть несколько дочерних компонентов.Каждый дочерний компонент может изменить или оказать некоторое влияние на свой родительский компонент.

Таким образом, вместо того, чтобы вносить изменения в родительский элемент и обновлять некоторые поля, я произвел «перезагрузку» текущей страницы с помощью

private route: ActivatedRoute;

reload(){
    this.router.navigate(["/admin/user/edit/"+this.user.id]);
}

По сути, он перенаправляет на текущую страницу.Например, текущая страница http://web.info/admin/user/edit/9 будет перенаправлена ​​на эту страницу с надеждой, что все данные на этой странице будут перезагружены с самыми новыми данными.

, но, похоже, угловой не будет перенаправлять/ перезагрузить ту же страницу с router.navigate

Как мне перезагрузить текущую страницу?

Редактировать:

Вот причина, по которой мне нужно перезагрузить страницу вместо того, чтобы вручную обновлять данные на текущей странице.Мне нужно сделать обновления на Другие компоненты, когда я сделал обновление, он добавит что-то в компонент истории.Мне нужно обновить пользовательский компонент и компонент истории вместе, так как оба компонента затронуты изменениями в другом компоненте.

Answer 1

Не совсем обновляет страницу, но думал, что это поможет кому-то еще там искать что-то простое

ngOnInit(){
    startUp()
}

startUp(){
    // Codes
}

refresh(){
    // Code to destroy child component
    startUp()
}

Answer 2

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

Answer 3

Немного сложно сделать что-то настолько простое, но безуспешно пытаясь перезагрузить и воссоздать все родительские и дочерние компоненты с текущим решением.

Angular Router теперь обеспечивает настройку стратегии, чтобы сообщить маршрутизатору, что делатьесли вы переходите по тому же URL-адресу, который этот пользователь предлагает в этой проблеме GitHub .

Прежде всего вы можете настроить, что делать при настройке маршрутизатора (модуля маршрутизатора).

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

Или, если вы похожи на меня и не хотите изменять поведение всего модуля маршрутизатора, вы можете сделать это с помощью метода / функции, подобных этой:

reloadComponent() {
    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
    this._router.onSameUrlNavigation = 'reload';
    this._router.navigate(['/same-route']);
}

Конечносначала вы должны вставить Router в конструктор вашего компонента:

// import { Router } from '@angular/router';
...
constructor(private _router: Router){}
...

Каким-то образом и, как указано @Abhiz , вы должны установить shouldReuseRoute , просто настроив маршрутизатор самостоятельноперезагрузка страницы не работает с этим подходом .

Я использовал функцию стрелки для shouldReuseRoute, потому что новые правила TSLint не разрешают функции без стрелок.

Answer 4

private router: Router

this.router.navigateByUrl(url)

Он будет перенаправлять на любые страницы без потери данных (даже на текущую страницу).Данные останутся как есть.

Answer 5

Это будет работать на 100%.Следующие строки кода отвечают за перезагрузку страницы в моем проекте.

load(val) {
if (val == this.router.url) {
  this.spinnerService.show();
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
 }
}

Просто используйте следующую часть в вашем коде.

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

Answer 6

Потому что это один и тот же компонент.Вы можете либо прослушать изменение маршрута, введя ActivatedRoute и реагируя на изменения параметров и параметров запроса, либо изменить значение по умолчанию RouteReuseStrategy, чтобы компонент был уничтожен и повторно отображен.когда URL-адрес изменяется вместо повторного использования.