webentwicklung-frage-antwort-db.com.de

Angular 2 Wie erkennt man das Drücken der hinteren Taste mithilfe von Router und location.go ()?

Ich habe eine App erstellt, die router 3.0.0-beta.1 verwendet, um zwischen den App-Abschnitten zu wechseln. Ich benutze auch location.go(), um den Wechsel zwischen Unterabschnitten derselben Seite zu emulieren. Ich habe <base href="/"> und einige Regeln zum Umschreiben von URLs verwendet, um im Falle einer Seitenaktualisierung alle Routen zu index.html umzuleiten. Dadurch kann der Router den angeforderten Unterabschnitt als URL-Parameter empfangen. Grundsätzlich habe ich es geschafft, die HashLocationStrategy zu vermeiden.

routes.ts 

export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        component: CatalogComponent
    },
    {
        path: 'catalog/:topCategory',
        component: CatalogComponent
    },
    {
        path: 'summary',
        component: SummaryComponent
    }
];

Wenn ich in der Navigationsleiste auf einen Unterabschnitt klicke, geschieht Folgendes:

  • logation.go() aktualisiert die URL mit der erforderlichen Zeichenfolge, um den aktuellen Unterabschnitt anzuzeigen
  • Eine benutzerdefinierte scrollTo()-Animation rollt die Seite am oberen Rand des angeforderten Unterabschnitts ab.

Wenn ich die Seite aktualisiere, verwende ich die zuvor definierte Route und extrahiere die zum Wiederherstellen erforderlichen Parameter, um zum angeforderten Unterabschnitt zu scrollen.

this._activatedRoute.params
    .map(params => params['topCategory'])
    .subscribe(topCategory => {
        if (typeof topCategory !== 'undefined' &&
            topCategory !== null
        ) {
            self.UiState.startArrowWasDismised = true;
            self.UiState.selectedTopCategory = topCategory;
        }
    });

Alles funktioniert gut, außer wenn ich auf die Schaltfläche "Zurück" klicke. Wenn die vorherige Seite ein anderer Abschnitt war, verhält sich der App-Router wie erwartet. Wenn es sich bei der vorherigen Seite/url jedoch um einen Unterabschnitt handelt, ändert sich die url zur vorherigen, aber in der Benutzeroberfläche passiert nichts. Wie kann ich feststellen, ob die Zurück-Taste gedrückt wurde, um die Funktion scrollTo() aufzurufen, um ihre Arbeit erneut auszuführen?

Die meisten Antworten, die ich relativ zu dem Ereignis onhashchange gesehen habe, wurden in meiner App nicht ausgelöst, da ich in der URL keinen Hash habe ...

javascriptangularangular-ui-router
9
Adrian Moisa

Ich weiß nicht, ob die Antworten veraltet sind, aber in Angular 2 hat keiner von ihnen gut funktioniert. Ich habe einen Angular 2-Ereignislistener hinzugefügt, indem ich ihn in meine Komponente importierte: 

import { HostListener } from '@angular/core';

und dann auf popstate für das window-Objekt achten (wie von Adrian empfohlen):

  @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
  }

Dieser Code funktioniert für mich auf dem neuesten Angular 2. 

9
VSO

Um die Schaltfläche "Zurück" des Browsers zu erkennen, klicken Sie auf Importiere die Plattformposition von '@ angle/common und platzieren Sie den folgenden Code in Ihren Konstruktor:

 constructor(location: PlatformLocation) {
     location.onPopState(() => {
        alert(window.location);
     }); }
5
Shivakumar NH

Angular-Dokumentationsstatus direkt in der PlatformLocation-Klasse ...

  • Diese Klasse sollte nicht direkt von einem Anwendungsentwickler verwendet werden.

Ich habe LocationStrategy im Konstruktor verwendet

constructor(location: LocationStrategy) {
  location.onPopState(() => {
    alert(window.location);
  });
}
4
Rmalmoe

Ich stimme der Antwort von Adrian Moisa zu,

sie können "more Angular 2 way" jedoch mit der Klasse PlatformLocation verwenden, indem Sie sie in Ihre Komponente oder Ihren Dienst einspeisen. Dann können Sie den onPopState-Rückruf folgendermaßen definieren:

this.location.onPopState(()=>{
  // your code here...
  this.logger.debug('onpopstate event');
});
3
vanrado

Eine andere Alternative für dieses Problem besteht darin, die vom Angular Router-Dienst ausgegebenen Ereignisse zu abonnieren. Da es sich um Routing handelt, erscheint mir die Verwendung von Router-Ereignissen sinnvoller.

constructor(router: Router) {
    router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          // Perform actions
        }
      });
}

Ich möchte darauf hinweisen, dass popstate passiert, wenn Sie im Browser vor und zurück drücken. Um dies effizient zu tun, müssten Sie einen Weg finden, um festzustellen, welcher auftritt. Für mich war das nur die Verwendung des event -Objekts vom Typ NavigationStart , das Auskunft darüber gibt, woher der Benutzer kommt und wohin er geht.

3
Jon Black

Die Verwendung von onpopstate event hat den Trick:

window.addEventListener('popstate',
    // Add your callback here
    () => self.events.scrollToTopCategory.emit({ categId: self.state.selectedTopCategory })
);
1
Adrian Moisa

Ein guter sauberer Weg ist, 'fromEvent' aus rxjs zu importieren und auf diese Weise zu verwenden.

fromEvent(window, 'popstate')
  .subscribe((e) => {
    console.log(e, 'back button');
  });
0
Ryann Galea