Angular Animation在路由到外部模块时出错[Cannot read property 'play&

Angular Animation error when routing to external module [Cannot read property 'play' of undefined]

本文关键字：property Cannot read play 出错 路由 Animation 外部 模块 Angular      更新时间：2023-09-26

我有使用Angular动画加载到DOM中的组件。当路由器出口和路由属于同一个父模块时，路由器链接才能正常工作。当我点击一个路由链接导航到一个交叉模块时，我得到了这个错误。

module A ->所有路由都使用动画

module B ->所有路由都使用动画

模块B到模块A的路由-> errors

logging-error-handler.js:37无法读取未定义的属性'play'

logging-error-handler.js:37 Uncaught (in promise):在"Element"上执行"animate"失败:不支持部分关键帧。

我认为这可能与动画不知道要看哪个路由器出口有关。然而，我认为void关键字是一个特殊的关键字，当找到时会解析。

animations: [
    trigger('routeAnimation', [
        state('*',
            style({
                opacity: 1
            })
        ),
        transition('void => *', [
            style({
                opacity: 0,
                transform: 'translateX(-100%)'
            }),
            animate('0.8s ease-in')
        ]),
        transition('* => void', [
            animate('0.8s ease-out', style({
                opacity: 0,
                transform: 'translateY(100%)'
            }))
        ])
    ])
]

我通过在模块a和模块b中添加假动画来修复这个问题。

animations: [
    trigger('routeAnimation', [])
]

这不是一个漂亮的解决方案，但对我有用

相关文章：