Невозможно перезагрузить/обновить активный маршрут

Недавно я обновился до новых RC3 и Router3alpha, и, похоже, некоторые вещи изменились.

Я заметил, что щелчок по ссылке активного маршрута больше не приводит к перезагрузке компонента. Как добиться такого поведения с новым маршрутизатором3?

Моя ссылка выглядит как

<a [routerLink]="['/link1']">Link1</a>

И для проверки я просто использовал случайное число в ngOnInit:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

Он отлично работает при переключении между маршрутами, но щелчок по текущему активному маршруту не приводит к перезагрузке компонента.

Ответ 1

В настоящее время это не поддерживается. Если изменяются только значения параметров, но маршрут остается тем же, компонент не создается заново.

Смотрите также https://github.com/angular/angular/issues/9811

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

Смотрите также fooobar.com/questions/252422/...

Ответ 2

Angular 2-4 текущий взлом перезагрузки маршрута

Для меня использование этого метода работает:

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

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

Вы можете прикрепить этот метод к событию клика на текущем компоненте, чтобы перезагрузить его.

Ответ 3

Как и в случае с Angular 5.1, теперь это можно сделать, используя onSameUrlNavigation конфигурации как часть встроенного маршрутизатора Angular. Это довольно просто настроить и уйти, хотя это и не очевидно из документации.

Первое, что вам нужно сделать, это установить параметр в вашем app.routing.ts, если у вас есть один или файл, в котором настроена маршрутизация вашего приложения.

Существует два возможных значения для onSameUrlNavigation 'reload' или false. Значение по умолчанию - false, которое не вызывает ничего, когда маршрутизатору предлагается перейти к активному маршруту. Мы хотим установить это значение в reload. Стоит отметить, что reload фактически не выполняет работу по перегрузке маршрута, он только повторно запускает события на маршрутизаторе, которые нам тогда нужно подключить.

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

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

paramsChange - срабатывает только при изменении параметров маршрута, например. где id в /user/:id изменяет

paramsOrQueryParamsChange - огонь при изменении параметра маршрута или изменении параметра запроса. например изменение свойства id или limit в /user/:id/invites?limit=10

always - Всегда стрелять, когда маршрут перемещается

Мы хотим всегда указывать в этом случае. Пример маршрута показан ниже.

export const routes: Routes = [
  {
    path: 'invites',
    component: InviteComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/invites/invites.module#InvitesModule',
      },
    ],
    canActivate: [AuthenticationGuard],
    runGuardsAndResolvers: 'always',
  }
]

Это ваш маршрутизатор настроен. Следующий шаг - фактически обработать события внутри одного из ваших компонентов. Вам нужно будет импортировать Router в свой компонент, а затем подключиться к событиям. В этом примере я подключился к событию NavigationEnd, которое запускается после того, как маршрутизатор завершил навигацию с одного маршрута на другой. Из-за того, как мы настроили приложение, оно будет срабатывать, даже если вы попытаетесь перейти к текущему маршруту.

export class InviteComponent implements OnInit {
  constructor(
    // ... your declarations here
    private router: Router,
  ) {
    // subscribe to the router events
    this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseInvites();
      }
    });
  }

  initialiseInvites() {
    // Set default values and re-fetch any data you need.
  }
}

Тяжелый подъем переходит в метод initialiseInvites(), здесь вы присваиваете свойства reset своим значениям по умолчанию и извлекаете данные из служб, чтобы вернуть компонент в исходное состояние.

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

Ответ 4

это сработало для меня, взято из этого:

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

теперь вы можете использовать как: this.redirectTo(this.router.url);

Ответ 5

Для Angular 2 rc7 - маршрутизатор 3.0

Измените базовый url в index.html на <script>document.write('<base href="/" />');</script>

Ответ 6

Это лучший хак, который я смог подобрать, чтобы обойти эту неприятную проблему:

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

Это работает, но это все еще хак, и я ненавижу, что команда Angular не предоставила метод reload()

Ответ 7

if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}

Ответ 8

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

конструктор (частный маршрутизатор: маршрутизатор) { // переопределить стратегию повторного использования маршрута this.router.routeReuseStrategy.shouldReuseRoute = function() { вернуть ложь; }

 this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
       // trick the Router into believing it last link wasn't previously loaded
       this.router.navigated = false;
       // if you need to scroll back to top, here is the right place
       window.scrollTo(0, 0);
    }
});

} Надеюсь это поможет

Ответ 9

В моем скромном мнении вы можете использовать window.location.reload() в typescript. Этот способ может быть простым и безопасным, поскольку является частью функций браузера.