Aktive Route kann nicht geladen / aktualisiert werden

Diese wird derzeit nicht unterstützt. Wenn nur der parameter-Werte ändern, aber die Strecke bleibt die gleiche, die Komponente wird nicht neu erstellt.

Siehe auch https://github.com/angular/angular/issues/9811

Können Sie abonnieren params, um benachrichtigt zu werden, wenn die Parameter ändern zu re-initialisieren die Instanz der Komponente.

Siehe auch https://stackoverflow.com/a/38560010/217408

InformationsquelleAutor der Antwort Günter Zöchbauer

Als Eckige 5.1 diese kann getan werden, mithilfe der onSameUrlNavigation
Konfigurations-option, als Teil des integrierten Winkel-router. Es ist relativ einfach zu set-up und Los geht es zwar nicht klar aus der Dokumentation.

Das erste, was Sie tun müssen ist, setzen Sie die option in Ihrem app.routing.ts wenn Sie eine haben, oder die Datei wo die app routing konfiguriert ist.

Gibt es zwei mögliche Werte für onSameUrlNavigation 'reload' oder false. Der Standardwert ist false die bewirkt, dass nichts passieren wird, wenn der router wird gebeten, zu navigieren, um die aktive route. Wir möchten, setzen Sie diesen Wert auf reload. Es ist erwähnenswert reload eigentlich nicht die Arbeit des Nachladens der Strecke, nur re-Trigger-Ereignisse auf die router, die wir dann brauchen, um Haken in.

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

Um zu bestimmen, Wann diese events eigentlich gefeuert, müssen Sie die runGuardsAndResolvers Konfigurations-option, die auf Ihrer route. Dieser kann drei Werte...

paramsChange - nur feuern, wenn die route params geändert haben, z.B. wenn die id in /user/:id änderungen

paramsOrQueryParamsChange - Feuer, wenn eine route param änderungen oder eine Abfrage param änderungen. z.B. die id oder die limit änderung der Eigenschaft in /user/:id/invites?limit=10

always - Immer Feuer, wenn die route navigiert wird

Wollen wir angeben immer in diesem Fall. Ein Beispiel route ist unten dargestellt.

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

Dass ist dein router konfiguriert ist. Der nächste Schritt ist, um tatsächlich die Ereignisse behandeln, die innerhalb einer Ihrer Komponenten. Sie müssen zum importieren der Router in Ihre Komponenten und Haken Sie dann in die Ereignisse. In diesem Beispiel habe ich eingehakt in die NavigationEnd Ereignis, das ausgelöst wird, sobald der router abgeschlossen hat seine navigation von einer route auf die nächste. Aufgrund der Art, wie wir die app konfiguriert haben, wird dieser nun sogar Feuer, wenn Sie versuchen, navigieren Sie zu der aktuellen route.

export class InviteComponent implements OnInit {
  constructor(
    //... your declarations here
    private router: Router,
  ) {
    //subscribe to the router events
    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.
  }
}

Die schwerarbeit geht in die initialiseInvites() Methode, das ist, wo Sie zurücksetzen der Einstellungen auf Ihre Standardwerte zurück und Holen von Daten von Dienstleistungen, um die Komponente wieder in Ihren ursprünglichen Zustand.

Müssen Sie wiederholen Sie diese Muster über jede Komponente, die Sie möchten in der Lage sein, um neu zu laden, wenn Sie angeklickt oder erfrischen Sie sich durch eine form der Schaltfläche aktualisieren klicken, werden Sie sicher, dass Sie die runGuardsAndResolvers option, um jede route in der routing-Datei.

InformationsquelleAutor der Antwort Simon McClive

Dies ist die beste hack, den ich schon in der Lage sein, um dieses lästige problem:

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

Dies funktioniert, aber es ist immer noch ein hack, und ich hasse es, dass die Angular team nicht eine reload() Methode

InformationsquelleAutor der Antwort Serj Sagan

Meiner bescheidenen Meinung nach könnten Sie die window.location.reload() im Typoskript.
Auf diese Weise können Sie einfach und sicher, weil ein Teil des browser-Funktionalitäten.

InformationsquelleAutor der Antwort Signeus