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

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

1 голос
/ 16 апреля 2019

У меня есть страница с navbar, которая загружает дочерние компоненты с использованием отложенной загрузки.Теперь, когда я пытаюсь щелкнуть nav для той же страницы / URL, angular ничего не делает (это поведение по умолчанию).Мне нужно nav для перезагрузки, чтобы, если пользователь выбрал какие-либо фильтры на странице, они были очищены.Таким образом, предоставляя функцию обновления на панели навигации, щелкните.

Я использовал onSameUrlNavigation: 'reload', но это не работает.

Мой родительский файл маршрута app-routing.module.ts 


const routes: Routes = [
  { path: 'option1', loadChildren: './featureModules/option1/option1.module#option1Module', canActivate:[ActivateRouteGaurd]   },                                            
  { path: 'option2', loadChildren: './featureModules/option2/option2.module#option2Module', canActivate:[ActivateRouteGaurd]   },
]

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

Мой дочерний маршрутизатор выглядит следующим образом. option1-routing.module.ts 

const routes: Routes = [
  { path: 'nav1', component: Nav1Component },
  { path: 'nav1/details/:id', component: ViewComponent }, 
  { path: 'nav2', component: Nav2Component },
  { path: 'nav2/details/:id', component: ViewComponent},
  { path: 'nav3', component: Nav3Component },
  { path: 'nav3/add', component: AddComponent },
  { path: '', redirectTo: 'user', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

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

Любая помощь приветствуется.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Спасибо всем за помощь. Используя ваши идеи, я нашел обходной путь. 

    const that = this;
    const path = this.location.path();
    $('.navbar-nav li.nav-nav1').on('click', function (e) {
      that.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
          that.router.navigate([path])
      );
    });

This is taking my page to other url and then to my url which tricks angular to reload the component.
0 голосов
/ 08 мая 2019

Как работает этот метод 

<a [routerLink]="path" (click)="reload()">aaa</a>
<router-outlet *ngIf="view"></router-outlet>

reload(){
  this.view=false;
  setTimeout(()=>this.view=true);
}
...