typescript - Anpassad bakåtanimation i angular-router

Mitt problem är att jag har flera sidor som använder routerTransition eftersom det kan hittas på flera ställen (med användning av query(...)-metoden). Problemet är att jag skulle vilja ha en annan animation när min komponent lämnar eller går in vid tryck på webbläsarens bakåtknapp. För att vara mer specifik:

• Vid vanlig navigering bör min komponent komma in från höger till vänster
• Vid bakåt-navigering ska min komponent komma in från vänster till höger

och tvärtom för att lämna.

Om jag på något sätt kunde upptäcka i ett routerhändelse om det är en framåt- eller bakåtnavigering, då skulle jag enkelt kunna göra detta, men jag kunde inte ta reda på hur man upptäcker detta utan att lägga till ytterligare data till mina rutter.

Redigera :

Jag försökte göra något som @Vega nämnde, jag klistrar in ett utdrag om det.

Mall :

<div class="root" [@routerTransition]="navigationState$ | async" 
                  (@routerTransition.done)="onDone($event)">
    <sdx-router-outlet [size]="currentSize"></sdx-router-outlet>
</div>

Kod :

this.navigationState$ = this._actions$.ofType(ActionTypes.GO_BACK)
    .map(() => {
        return { isGoingBack: true };
    })
    .merge(this._actions$.ofType(ActionTypes.GO_FORWARD).map(() => { return { isGoingBack: false }; }))
    .map((navigation: Navigation) => navigation.isGoingBack ? 'backward' : 'forward')
    .merge(this._resetNavigationState);

public onDone(event) {
    // This is just to reset to a state where I can trigger my animation again
    this._resetNavigationState.next('initial');
}

Idén här var att jag satte transitionsutlösaren till forward när jag navigerar framåt och backward när jag navigerar bakåt. Men eftersom (jag antar åtminstone att detta är orsaken) bakåt-inställningen i princip "kommer" från ng-location-tjänsten, kommer tillståndet att sättas innan routern börjar navigera, och det kommer inte att finnas någon animation eftersom utlösaren aktiverades innan komponenter kopplades på eller bort av router-outlet.

Som du kan se använder jag ngrx, men jag tror inte att det är viktigt. De två typerna är i grunden bara två Observables. En av dem utlöses vid tryck på bakåtknappen, som @Vega sa, den andra utlöser jag med en anpassad router (för nu) där jag överskrider metoden navigateByUrl och i den skickar jag bara en Forward-action, sedan kallar jag super.

Vad jag inte nämnde är att jag inte vill lägga till animationen på mina komponenter som jag laddar, eftersom all animation är densamma. Och om jag gör den som en "standard"-animation, då behöver jag inte vara rädd för att glömma att lägga till den på vissa komponenter.