So laden Sie die aktuelle Route mit dem eckigen Router 2 neu

Wenn Ihr navigieren() ändert nicht die URL, die schon auf die Adressleiste in Ihrem browser, der router hat damit nichts zu tun. Es ist nicht der router die Aufgabe, die Daten zu aktualisieren. Wenn Sie möchten, um die Daten zu aktualisieren, erstellen Sie eine service-Injektion in das Bauteil und rufen Sie die load-Funktion auf den service. Wenn die neuen Daten abgerufen werden, es wird die Ansicht aktualisieren, die über Bindungen.

InformationsquelleAutor der Antwort Yakov Fain

Dieser kann nun getan werden in Eckige 5.1 mit der onSameUrlNavigation Eigenschaft der Router config.

Ich habe soeben einen blog zu erklären, wie hier aber das wesentliche ist wie folgt

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

In deine router-config aktivieren onSameUrlNavigation option, die Einstellung 'reload'. Dies bewirkt, dass der Router Feuer eines Veranstaltungs-Zyklus, wenn Sie versuchen zu navigieren, um eine route, die ist schon aktiv.

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

In der route Definitionen, Satz runGuardsAndResolvers zu always. Dieser teilt dem router mit, immer kick-off der Wachen und Resolver-Zyklen, feuert die zugeordneten Ereignisse.

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

Schließlich, in der jede Komponente, die Sie aktivieren möchten zurückladen, die Sie benötigen, um die Ereignisse zu behandeln. Dies kann durch den Import der router, verbindlich auf die Ereignisse und den Aufruf einer Initialisierungs-Methode setzt den Zustand der Komponente und re-holt sich die Daten, wenn erforderlich.

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

All diese Schritte, sollten Sie haben die route nachladen aktiviert.

InformationsquelleAutor der Antwort Simon McClive

Kiste eine Funktion im controller, leitet zu der erwarteten Niederlage, wie so

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

dann verwenden Sie es wie diese

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

dieser Funktion wird die Umleitung in ein dummy-route und schnell wieder in die Ziel-route, ohne dass der Benutzer es zu merken.

InformationsquelleAutor der Antwort theo sharkson

Gefunden, schnell und straight-forward-Lösung, die nicht erfordert zu basteln, die innere Funktionsweise von angular:

Grundsätzlich: erstellen Sie Einfach eine Alternative route mit dem gleichen Ziel-Modul und wechseln Sie einfach zwischen Ihnen:

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

Und hier unterstützt die Umschaltung Menü:

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

Hoffe es hilft 🙂

InformationsquelleAutor der Antwort Carli Beeli

implementieren OnInit und rufen ngOnInit () - Methode für die route.navigate()

Sehen Sie ein Beispiel :

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

InformationsquelleAutor der Antwort Evandro Mendes

Bei mir funktioniert hardcoding mit

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

InformationsquelleAutor der Antwort V. Kalyuzhnyu

Angenommen, dass die Komponente route, die Sie aktualisieren möchten, ist viewdann verwenden Sie diesen:

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

können Sie ein debugger innerhalb der Methode zu wissen, was die genaue route wird nach kommen navigieren Sie zu "departments/:id/employees".

InformationsquelleAutor der Antwort Ebraheem Alrabee'

Versuchen, diese

Fenster.open('dashboard', '_self');

seiner alten Methode, aber Sie funktioniert auf allen eckige version, wo die Umleitung auf der route und aktualisieren Sie die Seite.

InformationsquelleAutor der Antwort Kavi Joshi

benutzen Sie einfach die native javascript-reload-Methode:

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

InformationsquelleAutor der Antwort Augusto Claro