Блог

Главная - Вопросы по программированию - Хотите нажать на тот же маршрут, чтобы обновить страницу, но ничего не запускаете

Хотите нажать на тот же маршрут, чтобы обновить страницу, но ничего не запускаете

#angular #angular-routing

Вопрос:

Я работаю над приложением Angular v12 с навигационными меню, в котором есть рабочие маршруты к каждому компоненту. У меня есть 1 страница, мне нужно иметь возможность щелкнуть по меню и обновить страницу. Если я нахожусь на странице пользователя, и навигационное меню пользователя уже было нажато, я хотел бы щелкнуть его еще раз и вернуться к самому себе, чтобы обновить страницу данными по умолчанию. Прямо сейчас, когда я нажимаю на навигационное меню, ничего не происходит. Я разместил точки останова в своем навигационном компоненте, и он не сломается, если я снова нажму на маршрут.

Мы будем очень признательны за любую помощь/руководство.

Мои маршруты настроены в приложении-routing.module.ts

 const appRoutes: Routes = [
  {path: "", component: HomeComponent},
  {path: "users", loadChildren: ()=> UsersModule},
]

В моем файле ts компонента Nav я смотрю на состояние маршрутизатора, но

 export class MyNavComponent implements OnInit {

  @Input() menuItems: any[] = [];
 
  selectedMenu = {} as RouteInfo;

  constructor(private router: Router) { 
 
    router.events.subscribe((event) => {

      if(event instanceof NavigationStart) {

// I placed a breakpoint here and it does not break if same menu link is clicked on again.
      
      }
    });

  }

  ngOnInit(): void {
  }
  
}

Комментарии:

1. Почему вы хотите обновить страницу, когда используете Angular ?

Ответ №1:

Похоже, вам может понадобиться опция конфигурации onSameUrlNavigation.

 
class CustomReuseStrategy implements RouteReuseStrategy {
  shouldReuseRoute() {
    return false;
  }
}

const ROUTES: Routes = [
  ...
];

@ngModule({
  imports: [
    RouterModule.forRoot(ROUTES, { onSameUrlNavigation: 'reload' }),
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomReuseStrategy,
    },
  ],
  exports: [RouterModule],
})

Обратите внимание, что это только определяет, будет ли маршрут повторно обрабатывать URL-адрес и инициировать соответствующие действия и события, такие как перенаправление, защита и распознаватели. По умолчанию маршрутизатор повторно использует экземпляр компонента, когда он повторно переходит к тому же типу компонента, не посещая сначала другой компонент. Это поведение настраивается стратегией RouteReuseStrategy. Чтобы перезагрузить маршрутизированные компоненты при той же навигации по URL, вам необходимо установить onSameUrlNavigation в значение «перезагрузить» и предоставить RouteReuseStrategy, которая возвращает false для shouldReuseRoute.

Метки: , ,