Question

我的问题是我有几个页面正在使用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设置为select extract(year from current_date) "Year";。但是，因为（我假设至少这是原因）后向设置基本上来自ng-location服务，状态将在路由器开始导航之前设置，并且不会有任何动画，因为触发器是在通过路由器插座连接或拆卸组件之前发射。

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

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

角度路由器

0 个答案: