单击导航到同一页面时的角路由动画

问题描述

我有一个包含索引和详细信息页面的应用程序。
我用下面的路线动画进行设置，当在索引和明细之间来回移动时，所有效果都很好。

我已经在详细信息页面上实现了上一个/下一个按钮，并希望在下一个触发“前进动画”，并在上一个触发“后动画”。

我可以通过点击直接触发路线动画吗，或者如何实现？

app.component.html

<main [@routeAnimations]="prepareRoute(outlet)"> 
    <router-outlet #outlet="outlet"></router-outlet>
</main>

app.routing.module.ts

const routes: Routes = [
    { path: 'home',component: HomeComponent,data: { animation: 'Home' }},{ path: 'index',component: IndexComponent,data: { animation: 'Index' }},{ path: 'home',component: DetailComponent,data: { animation: 'Detail' }}
]

route.animation.ts

export const slideInAnimation = 
    trigger('routeAnimation',[
        // Slide Back
        transition(`
                Detail => Index,Detail => Home,// Detail => Detail (trigger on prevIoUs Click)
                Index => Home,[ ...Omitted ],// Slide Forward
        transition(`
                Home => Index,Home => Detail,// Detail => Detail,(trigger on Next Click)
                Index => Detail,[ ...Omitted ]
    ])

detail.component.ts

<div>
    <button-component 
        [label]="'PrevIoUs'"
        (onClick)= "prevIoUs()">
    </button-component>
    <button-component 
        [label]="'Next'"
        (onClick)="next()">
    </button-component>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）