Ich verwende Winkel 2 mit Hash-Standort-Strategie.

Die Komponente wird mit dieser Route geladen:

"departments/:id/employees"

Soweit in Ordnung.

Nachdem ich mehrere bearbeitete Tabellenzeilen erfolgreich im Stapel gespeichert habe, möchte ich die aktuelle Routen-URL über Folgendes neu laden:

this.router.navigate([`departments/${this.id}/employees`]);

Aber nichts passiert, warum?

Wenn Ihr navig (() die URL nicht ändert, die bereits in der Adressleiste Ihres Browsers angezeigt wird, hat der Router nichts zu tun. Es ist nicht die Aufgabe des Routers, die Daten zu aktualisieren. Wenn Sie die Daten aktualisieren möchten, erstellen Sie einen in die Komponente eingefügten Dienst und rufen Sie die Ladefunktion für den Dienst auf. Wenn die neuen Daten abgerufen werden, wird die Ansicht über Bindungen aktualisiert.

Dies kann jetzt in Angular 5.1 mithilfe der onSameUrlNavigationEigenschaft der Routerkonfiguration erfolgen.

Ich habe einen Blog hinzugefügt, der erklärt, wie hier, aber der Kern davon ist wie folgt

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

In der onSameUrlNavigationOption zum Aktivieren der Routerkonfiguration setzen Sie diese Option auf 'reload'. Dies führt dazu, dass der Router einen Ereigniszyklus auslöst, wenn Sie versuchen, zu einer bereits aktiven Route zu navigieren.

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

Stellen Sie in Ihren Routendefinitionen runGuardsAndResolversauf ein always. Dadurch wird der Router angewiesen, die Schutz- und Auflösungszyklen immer zu starten und damit verbundene Ereignisse auszulösen.

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

Schließlich müssen Sie in jeder Komponente, die Sie das Neuladen aktivieren möchten, die Ereignisse behandeln. Dies kann durch Importieren des Routers, Binden an die Ereignisse und Aufrufen einer Initialisierungsmethode erfolgen, die den Status Ihrer Komponente zurücksetzt und bei Bedarf Daten erneut abruft.

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

Wenn alle diese Schritte ausgeführt wurden, sollte das erneute Laden der Route aktiviert sein.

Erstellen Sie im Controller eine Funktion, die wie folgt zur erwarteten Route umleitet

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

dann benutze es so

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

Diese Funktion leitet zu einer Dummy-Route um und kehrt schnell zur Zielroute zurück, ohne dass der Benutzer dies bemerkt.

BEARBEITEN

Verwenden Sie für neuere Versionen von Angular (5.1+) die von @Simon McClive vorgeschlagene Antwort

Alte Antwort

Ich habe diese Problemumgehung bei einer GitHub-Funktionsanforderung für Angular gefunden:

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

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

Ich habe versucht, dies zu meiner Funktion app.component.ts hinzuzufügen ngOnInit , und es hat sicher funktioniert. Alle weiteren Klicks auf denselben Link laden jetzt die componentund Daten neu.

Link zur ursprünglichen GitHub-Funktionsanforderung

Das Guthaben geht an mihaicux2 auf GitHub.

Ich habe dies auf Version 4.0.0-rc.3mit getestetimport { Router, NavigationEnd } from '@angular/router';

Etwas knifflig: Verwenden Sie denselben Pfad mit einigen Dummy-Parametern. Beispielsweise-

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

Ich benutze dieses für Angular 9-Projekt:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS: Getestet und funktioniert auch bei "Angular 7, 8"

Angular 2-4 Route Reload Hack

Für mich funktioniert die Verwendung dieser Methode in einer Root-Komponente (Komponente, die auf einer beliebigen Route vorhanden ist):

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

Das funktioniert bei mir wie ein Zauber

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));

Beim erneuten Laden der Parameter wird keine Seite neu geladen. Das ist wirklich eine gute Funktion. Die Seite muss nicht neu geladen werden, aber wir sollten den Wert der Komponente ändern. Die paramChange-Methode ruft die URL-Änderung auf. So können wir die Komponentendaten aktualisieren

/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) {

}

Das habe ich mit Angular 9 gemacht . Ich bin nicht sicher, ob dies in älteren Versionen funktioniert.

Sie müssen dies aufrufen, wenn Sie neu laden müssen.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

Für Router forRoot muss SameUrlNavigation auf "neu laden" eingestellt sein.

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

Und für jede Route muss runGuardsAndResolvers auf "immer" eingestellt sein.

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

Für mich arbeitet Hardcoding mit

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

Soweit ich weiß, ist dies mit dem Router in Angular 2 nicht möglich. Sie können jedoch einfach Folgendes tun:

window.location.href = window.location.href

So laden Sie die Ansicht neu.

Wir haben eine schnelle und unkomplizierte Lösung gefunden, bei der Sie nicht am Innenleben von Angular basteln müssen:

Grundsätzlich gilt: Erstellen Sie einfach eine alternative Route mit demselben Zielmodul und wechseln Sie einfach zwischen diesen:

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

Und hier das Umschaltmenü:

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

Ich hoffe es hilft :)

Ein bisschen Hardcore aber

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

In meinem Fall:

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

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

richtig arbeiten

Implementieren Sie OnInit und rufen Sie ngOnInit () in der Methode für route.navigate () auf.

Siehe ein Beispiel:

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

Ein ähnliches Szenario wurde mithilfe einer Dummy-Komponente und einer Route für gelöst reload, die tatsächlich a ausführt redirect. Dies deckt definitiv nicht alle Benutzerszenarien ab, sondern hat nur für mein Szenario funktioniert.

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

Das Routing ist so verdrahtet, dass alle URLs mithilfe eines Platzhalters abgefangen werden:

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 {}

Um dies zu verwenden, müssen wir nur der URL, zu der wir gehen möchten, Reload hinzufügen:

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

Es gibt verschiedene Ansätze, um die aktuelle Route zu aktualisieren

Ändern des Routerverhaltens (seit Angular 5.1) Setzen Sie die Router onSameUrlNavigation auf 'reload'. Dadurch werden die Router-Ereignisse auf derselben URL-Navigation ausgegeben.

• Sie können sie dann bearbeiten, indem Sie eine Route abonnieren
• Sie können es mit der Kombination von runGuardsAndResolvers verwenden, um Resolver erneut auszuführen

Lassen Sie den Router unberührt

• Übergeben Sie eine Aktualisierung queryParam mit dem aktuellen Zeitstempel in der URL und abonnieren Sie queryParams in Ihrer gerouteten Komponente.
• Verwenden Sie das Aktivierungsereignis des Router-Outlets, um die geroutete Komponente zu erfassen.

Ich habe eine ausführlichere Erklärung unter https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e geschrieben

Hoffe das hilft.

Angenommen, die Route der Komponente, die Sie aktualisieren möchten, lautet view: Verwenden Sie Folgendes :

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

Sie können debuggerder Methode ein internes hinzufügen , um zu wissen, welche Route nach dem Navigieren genau angezeigt wird "departments/:id/employees".

Eine Lösung besteht darin, einen Dummy-Parameter (dh die Zeit in Sekunden) zu übergeben. Auf diese Weise wird der Link immer neu geladen:

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

Ich benutze setTimeoutund navigationByUrlum dieses Problem zu lösen ... Und es funktioniert gut für mich.

Es wird zu einer anderen URL umgeleitet und kommt stattdessen wieder in der aktuellen URL ...

 setTimeout(() => {
     this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
           this.router.navigate([route]));
     }, 500)

Ich glaube, dies wurde (nativ) in Angular 6+ gelöst; prüfen

• hier https://github.com/angular/angular/issues/13831 &&

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

Dies funktioniert jedoch für eine gesamte Route (einschließlich aller Kinderrouten).

Wenn Sie auf eine einzelne Komponente abzielen möchten, gehen Sie wie folgt vor: Verwenden Sie einen Abfrageparameter, der sich ändert, damit Sie so oft navigieren können, wie Sie möchten.

Am Punkt der Navigation (Klasse)

   this.router.navigate(['/route'], {
        queryParams: { 'refresh': Date.now() }
    });

In der Komponente, die Sie "aktualisieren / neu laden" möchten

// . . . Component Class Body

  $_route$: Subscription;
  constructor (private _route: ActivatedRoute) {}

  ngOnInit() {
    this.$_route$ = this._route.queryParams.subscribe(params => {
      if (params['refresh']) {
         // Do Something
         // Could be calling this.ngOnInit() PS: I Strongly advise against this
      }

    });
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leak and unexpected behavior
    this.$_route$.unsubscribe();
  }

// . . . End of Component Class Body

Sehr frustrierend, dass Angular immer noch keine gute Lösung dafür zu bieten scheint. Ich habe hier ein Github-Problem angesprochen: https://github.com/angular/angular/issues/31843

In der Zwischenzeit ist dies meine Problemumgehung. Es baut auf einigen der anderen oben vorgeschlagenen Lösungen auf, aber ich denke, es ist etwas robuster. Dabei wird der Router-Dienst in ein " ReloadRouter" eingeschlossen, das sich um die Neuladefunktion kümmert und RELOAD_PLACEHOLDERder Core-Router-Konfiguration eine hinzufügt . Dies wird für die Zwischennavigation verwendet und verhindert, dass andere Routen (oder Wachen) ausgelöst werden.

Hinweis: Verwenden ReloadRouterSie die Funktion nur in diesen Fällen, wenn Sie die Neuladefunktion verwenden möchten . Verwenden Sie Routersonst das normale .

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReloadRouter {
  constructor(public readonly router: Router) {
    router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
  }

  public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
    return this.router
      .navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
      .then(() => this.router.navigate(commands, extras));
  }
}

Importieren Routerund ActivatedRoutevon@angular/router

import { ActivatedRoute, Router } from '@angular/router';

Injizieren Routerund ActivatedRoute(falls Sie etwas von der URL benötigen)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

Rufen Sie bei Bedarf einen beliebigen Parameter von der URL ab.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

Wenn Sie einen Trick verwenden, indem Sie zu einer Dummy- oder Haupt-URL und dann zur tatsächlichen URL navigieren, wird die Komponente aktualisiert.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

In deinem Fall

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

Wenn Sie eine Dummy-Route verwenden, blinkt der Titel "Nicht gefunden", wenn Sie eine nicht gefundene URL implementiert haben, falls keine URL übereinstimmt.

Änderungen an Routenparametern abonnieren

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

Wenn Sie die Route über Router Link ändern, gehen Sie wie folgt vor:

  constructor(public routerNavigate: Router){

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

          this.router.events.subscribe((evt) => {

            if (evt instanceof NavigationEnd) {

                this.router.navigated = false;
             }
          })
      }

Sie sollten die Eigenschaft "onSameUrlNavigation" in RouterModule verwenden und dann die Routenereignisse https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e abonnieren

Legt fest, wann die Route gespeichert werden soll, und gibt false zurück

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

und setzen Sie den navigierten Wert des Routers auf false, um anzuzeigen, dass diese Route nie geroutet wurde

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

Ich habe ein paar Korrekturen versucht und keine davon funktioniert. Meine Version ist einfach: Fügen Sie einen neuen nicht verwendeten Parameter zu den Abfrageparametern hinzu

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// benutze Backtick um die Route einzuschließen

window.location.replace ( departments/${this.id}/employees)