2

我的问题是我有几个使用 routerTransition 的页面，因为它可以在多个地方找到（使用query(...)方法）。问题是当我的组件在浏览器的后退按钮按下时离开或进入时，我希望有不同的动画。更加具体：

  • 在常规导航中，我的组件应该从右到左进入
  • 在向后导航时，我的组件应该从左到右进入

反之亦然。

如果我能以某种方式在路由器事件中检测到它是向前导航还是向后导航，那么我可以轻松地做到这一点，但如果不向我的路线添加更多数据，我无法找到如何检测这一点。

编辑：

我试图做类似@Vega 提到的事情，我粘贴了一个关于它的片段。

模板：

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

代码：

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

这里的想法是我将转换触发器设置为forward向前backward导航和向后导航时。但是，因为（我认为至少这是原因）向后设置基本上“来自” ng-location 服务，所以状态将在路由器开始导航之前设置，并且不会有任何动画，因为触发器是在路由器插座连接或分离组件之前触发。

如您所见，我正在使用ngrx，但我认为这并不重要。这两种类型基本上只是两个 Observable。其中一个如果在按下后退按钮时触发，就像@Vega 说的那样，另一个我用自定义路由器触发（现在），我覆盖了 navigateByUrl 方法，在其中我只是调度一个 Forward 动作，然后调用超级。

我没有提到的是我不想把动画放到我加载的组件中，因为所有的动画都是一样的。如果我把它做成一个“默认”动画，那么我就不必害怕忘记放在一些组件上。

4

0 回答 0