Angular 5: анимация маршрута для навигации по тому же маршруту, но с разными параметрами

Question

В моем приложении Angular 5 пользователь может перейти к маршруту, который использует тот же маршрут, но с другими параметрами. Например, они могут перейти от /page/1 к /page/2.

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

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

Вот минимальное приложение, которое воспроизводит мою проблему.

angular5 angular-router angular-animations

3

Nigel Nelson 3 Янв 2018 в 05:28

Answer 1

Это старый вопрос, но это все, если вы все еще ищете. Добавьте этот код в свой файл app.Component.ts.

import { Router, NavigationEnd } from '@angular/router';

constructor(private _Router: Router) { }

ngOnInit() {
  this._Router.routeReuseStrategy.shouldReuseRoute = function(){
  return false;
  };
  this._Router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._Router.navigated = false;
        window.scrollTo(0, 0);
    }
  });
}

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

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

Обновить

Поскольку angular 6 выпускается с обновлениями ядра, вам больше не нужен этот кусок кода, просто добавьте следующий параметр в свой импорт маршрутов.

onSameUrlNavigation: 'reload'

Значение этого параметра по умолчанию равно 'ignore'.

Пример

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

Будьте в курсе и счастливого кодирования.

3

Ahmed Kamal 14 Июн 2018 в 07:22

Answer 2

В итоге я создал собственный RouteReuseStrategy, который выполнил свою работу. Он во многом основан на этом ответе.

export class CustomReuseStrategy implements RouteReuseStrategy {
  storedRouteHandles = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRouteHandles.set(route.routeConfig.path, handle);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.storedRouteHandles.get(route.routeConfig.path);
  }

  // This is the important part! We reuse the route if
  // the route *and its params* are the same.
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig &&
      future.params.page === curr.params.page;
  }
}

Проверьте это на StackBlitz!

0

Nigel Nelson 13 Июн 2018 в 16:27

Angular 5: анимация маршрута для навигации по тому же маршруту, но с разными параметрами

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

angular5