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 anzuzeigenscrollTo()
-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 ...
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.
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);
}); }
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);
});
}
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');
});
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.
Die Verwendung von onpopstate event hat den Trick:
window.addEventListener('popstate',
// Add your callback here
() => self.events.scrollToTopCategory.emit({ categId: self.state.selectedTopCategory })
);
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');
});