如何判断Angular路由是否来自子router-outlet以跳过过渡动画

在Angular 19应用中使用withViewTransitions()实现路由淡入淡出过渡后，子<router-outlet>的局部路由切换也会触发动画，可通过以下方式仅保留顶级路由切换的动画效果：

解决方案 #

利用onViewTransitionCreated钩子中的from和to（ActivatedRouteSnapshot实例），判断路由切换是否发生在同一个顶级父路由下——若是则判定为子路由切换，调用transition.skipTransition()跳过动画。

完整实现代码 #

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(APP_ROUTES, withViewTransitions({
      onViewTransitionCreated: ({ transition, from, to }) => {
        // 初始加载时from为null，不处理
        if (!from) return;

        const getTopLevelParent = (route: ActivatedRouteSnapshot): ActivatedRouteSnapshot => {
          let current = route;
          // 向上遍历到根路由的直接子节点（父路由为根路由）
          while (current.parent && current.parent.parent !== null) {
            current = current.parent;
          }
          return current;
        };

        const fromTopLevel = getTopLevelParent(from);
        const toTopLevel = getTopLevelParent(to);

        // 顶级父路由相同，说明是子路由切换，跳过动画
        if (fromTopLevel === toTopLevel) {
          transition.skipTransition();
        }
      },
    })),
  ]
});

原理说明 #

• ActivatedRouteSnapshot的parent属性可向上遍历路由树，根路由的parent为null
• 子路由切换时，切换前后的路由共享同一个顶级父路由（对应顶级<router-outlet>渲染的页面），通过比较顶级父路由是否相同即可区分是否为子路由切换
• 初始加载时from为null，直接跳过判断，保留首次页面的淡入效果

内容的提问来源于stack exchange，提问作者Chris Barr