Как перезагрузить текущий маршрут с помощью маршрутизатора angular 2

я нашел этот обходной путь на запросе функции GitHub для Angular:

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

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

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

ссылка на оригинальный запрос функции GitHub

заслуга mihaicux2 на GitHub.

я проверял это на версии 4.0.0-rc.3 С import { Router, NavigationEnd } from '@angular/router';

теперь это можно сделать в Angular 5.1 с помощью onSameUrlNavigation свойства конфигурации маршрутизатора.

я добавил блог, объясняющий, как здесь, но суть его заключается в следующем

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

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

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

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

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

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

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store 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.initialiseInvites();
     }
   });
 }

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

 ngOnDestroy() {
   if (this.navigationSubscription) {
     this.navigationSubscription.unsubscribe();
   }
 }
}

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

сложновато: использовать тот же путь с некоторыми фиктивными параметрами. Например -

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

создайте функцию в контроллере, которая перенаправляет на ожидаемый маршрут так

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

тогда используйте его так

this.redirectTo('//place your uri here');

эта функция перенаправит на фиктивный маршрут и быстро вернется к целевому маршруту без понимания пользователя.

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

для меня, используя этот метод внутри корневого компонента (компонент, который присутствует на любом маршруте) работает:

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]);
    });
  }

для меня работает hardcoding с

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

найдено быстрое и прямолинейное решение, которое не требует возиться с внутренней работой углового:

в основном: просто создайте альтернативный маршрут с тем же модулем назначения и просто переключайтесь между ними:

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

и здесь меню toggeling:

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

надеюсь, что это помогает :)

в моем случае:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

работать правильно

реализуйте OnInit и вызовите ngOnInit () в методе для маршрута.navigate ()

пример :

export class Component implements OnInit {

  constructor() {   }

  refresh() {
    this.router.navigate(['same-route-here']);
    this.ngOnInit();   }

  ngOnInit () {

  }

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

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'reload',
  template: `
    <h1>Reloading...</h1>
  `,
})
export class ReloadComponent implements OnInit{
  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
    this.router.navigateByUrl(url);
  }
}

маршрутизация связана проволокой, чтобы поймать все URL-адреса с помощью подстановочного знака:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, ReloadComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { 
        path: 'reload',
        children: [{
          path: '**',
          component: ReloadComponent 
        }]
      },
      { path: '**', redirectTo: 'login'}
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

чтобы использовать это, нам просто нужно добавить перезагрузку в url, куда мы хотим пойти:

  this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})

на странице перезагрузки изменения param не произойдет. Это действительно хорошая функция. Нет необходимости перезагружать страницу, но мы должны изменить значение компонента. метод paramChange вызовет изменение url-адреса. Таким образом, мы можем обновить данные компонента

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}

подписаться на изменения параметров маршрута

    // parent param listener ie: "/:id"
    this.route.params.subscribe(params => {
        // do something on parent param change
        let parent_id = params['id']; // set slug
    });

    // child param listener ie: "/:id/:id"
    this.route.firstChild.params.subscribe(params => {
        // do something on child param change
        let child_id = params['id'];
    });

предположим, что маршрут компонента, который вы хотите обновить view, а затем использовать это:

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

вы можете добавить debugger внутри метода, чтобы узнать, какой точный маршрут придет после перехода к "departments/:id/employees".

это сработало для меня:

let url = `departments/${this.id}/employees`;

this.router.navigated = false;
this.router.navigateByUrl(url);

перезагрузить текущий маршрут в angular 2 очень полезная ссылка для перезагрузки текущего маршрута в angualr 2 или 4

в этом определите две техники для этого

1. С фиктивным запросом params
2. с муляжами маршруту

Подробнее см. выше ссылку

попробуй такое

просто используйте собственный метод перезагрузки javascript:

reloadPage() {
    window.location.reload();
}