Навигация по текущему маршруту в Angular 2? - PullRequest
Новая
       9

Навигация по текущему маршруту в Angular 2?

0 голосов
/ 26 сентября 2018

Я пытаюсь перезагрузить текущую страницу в Angular.

Поэтому, когда я перезагружаю страницу, вызывается мой корневой компонент и выполняется эта строка: 

console.log(this.router.routerState.snapshot.url)

, которая печатает "/ component-x "

и затем я выполняю эту строку кода: 

this.router.navigate(['/component-x]')

И это не работает, и я вышел из приложения.

Естьнавигация к текущему маршруту в Angular поддерживается?И как еще я могу добиться перезагрузки текущей страницы?

Обратите внимание, что мое приложение размещено в Cloudfront на AWS, и у меня есть настроенное правило, которое возвращает index.html при возникновении ошибки 404 (т.е. при обновлении страницыпроисходит), и я следовал этому руководству по перезагрузке текущего маршрута в Angular: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Но он все еще не работает.Может кто-нибудь указать, что мне не хватает?

Спасибо!

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете использовать onSameUrlNavigation от Angular router: 

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

А затем использовать runGuardsAndResolvers на своем маршруте и установить его всегда: 

export const routes: Routes = [
 {
   path: 'my-path',
   component: MyComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/my-path/mycomponent.module#MyComponentModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

С этимиДва изменения вашего маршрутизатора настроены.Теперь вам нужно подключиться к NavigationEnd в вашем компоненте: 

export class MyComponent implements OnInit, OnDestroy{
 // ... your class variables here
 navigationSubscription;
 constructor(
   // … your declarations here
   private router: Router,
  ) {
   // subscribe to the router events - storing the subscription so
   // we can unsubscribe later. 
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseMyComponent();
     }
   });
 }

 initialiseMyComponent() {
   // Set default values and re-fetch any data you need.
 }
 ngOnDestroy() {
    // avoid memory leaks here by cleaning up after ourselves. If we  
    // don't then we will continue to run our initialiseInvites()   
    // method on every navigationEnd event.
    if (this.navigationSubscription) {  
       this.navigationSubscription.unsubscribe();
    }
  }
}

И вот, теперь у вас есть возможность перезагрузки.Надеюсь это поможет.К сожалению, документы не очень ясны по этому поводу.

...