如何为特定router-outlet禁用视图过渡效果？

核心思路 #

Angular的withViewTransitions()是全局启用视图过渡，但可以通过拦截导航事件，针对特定router-outlet对应的路由导航跳过过渡。我们可以编写一个指令标记需要禁用过渡的router-outlet，再通过服务配合导航拦截器实现动态禁用逻辑，完全规避CSS方案的兼容性问题。

实现步骤 #

1. 编写禁用视图过渡的指令 #

这个指令会给目标router-outlet添加标识，并同步到管理服务中：

import { Directive, Input, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ViewTransitionDisableService } from './view-transition-disable.service';

@Directive({
  selector: 'router-outlet[disableViewTransitions]',
  standalone: true
})
export class DisableViewTransitionsDirective implements OnInit {
  @Input() disableViewTransitions = true;

  constructor(
    private routerOutlet: RouterOutlet,
    private disableService: ViewTransitionDisableService
  ) {}

  ngOnInit(): void {
    if (this.disableViewTransitions) {
      // 记录当前outlet的名称，默认是'primary'，命名outlet需对应设置
      this.disableService.addDisabledOutlet(this.routerOutlet.name);
    }
  }
}

2. 创建配套服务管理禁用状态 #

服务用来存储需要禁用过渡的outlet列表，并提供判断方法：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ViewTransitionDisableService {
  private disabledOutlets = new Set<string>();

  addDisabledOutlet(outletName: string): void {
    this.disabledOutlets.add(outletName);
  }

  shouldDisableTransition(outletName: string): boolean {
    return this.disabledOutlets.has(outletName);
  }
}

3. 配置路由导航拦截器 #

在provideRouter中通过navigationInterceptor拦截导航，判断目标路由所属outlet是否在禁用列表，进而决定是否跳过过渡：

import { provideRouter, withViewTransitions, NavigationInterceptor } from '@angular/router';
import { ViewTransitionDisableService } from './view-transition-disable.service';

export const appRoutes = [
  // 你的路由配置内容
];

export const routerConfig = provideRouter(
  appRoutes,
  withViewTransitions({
    navigationInterceptor: (transition) => {
      const disableService = transition.injector.get(ViewTransitionDisableService);
      const targetOutlet = transition.targetRoute.outlet;
      
      // 目标outlet在禁用列表中则返回false，跳过视图过渡
      if (disableService.shouldDisableTransition(targetOutlet)) {
        return false;
      }
      
      // 其他情况启用视图过渡
      return true;
    }
  })
);

4. 在模板中使用指令 #

给需要禁用过渡的router-outlet添加指令即可：

<!-- 禁用视图过渡的默认router-outlet -->
<router-outlet disableViewTransitions></router-outlet>

<!-- 禁用视图过渡的命名router-outlet -->
<router-outlet name="sidebar" disableViewTransitions></router-outlet>

扩展方案（可选） #

如果需要更灵活的路由级禁用，可以通过路由数据标记：

// 路由配置示例
{
  path: 'no-transition-page',
  component: NoTransitionPageComponent,
  data: { disableViewTransition: true }
}

// 修改导航拦截器逻辑
navigationInterceptor: (transition) => {
  const shouldDisable = transition.targetRoute.snapshot.data['disableViewTransition'];
  return !shouldDisable;
}

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