Angular 2/4：如何在运行时根据屏幕尺寸选择router-outlet

哈哈，这个坑我踩过！Angular的<router-outlet>不管你用CSS藏不藏，只要它在DOM里存在，路由系统就会把它当成有效的出口，而且确实会优先匹配嵌套层级更深的那个——这也是你遇到问题的根源。单纯靠display: none根本绕不开这个机制，下面给你几个实用的解决方案，按推荐程度排序：

方案一：用*ngIf销毁/重建路由出口（最简洁） #

核心思路：让不当前不使用的路由出口完全从DOM中消失，而不是仅仅隐藏。Angular路由只会匹配当前DOM中存在的出口，这样就不会有冲突了。

实现步骤： #

1. 在父组件模板中写两个布局容器，用*ngIf根据屏幕尺寸控制显示/隐藏，每个容器里放一个<router-outlet>：

<!-- 桌面端布局（flexbox） -->
<div class="desktop-container" *ngIf="isDesktop">
  <!-- 桌面端的导航栏、侧边栏等元素 -->
  <nav class="desktop-nav">...</nav>
  <router-outlet></router-outlet>
</div>

<!-- 移动端布局 -->
<div class="mobile-container" *ngIf="!isDesktop">
  <!-- 移动端的顶部导航、底部tab等元素 -->
  <header class="mobile-header">...</header>
  <router-outlet></router-outlet>
</div>

2. 在组件类中用Angular CDK的BreakpointObserver监听屏幕尺寸（也可以自己监听resize事件）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styles: [`
    .desktop-container {
      display: flex;
      height: 100vh;
      /* 你的桌面布局样式 */
    }
    .mobile-container {
      display: block;
      height: 100vh;
      /* 你的移动端布局样式 */
    }
  `]
})
export class ParentComponent implements OnInit, OnDestroy {
  isDesktop = true;
  private destroy$ = new Subject<void>();

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    // 监听桌面端断点（官方预设的Web断点，对应屏幕宽度≥960px，可自定义）
    this.breakpointObserver.observe([Breakpoints.Web])
      .pipe(takeUntil(this.destroy$))
      .subscribe(result => {
        this.isDesktop = result.matches;
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

为什么这个方案有效？ #

当*ngIf条件为false时，对应的<router-outlet>会被Angular完全从DOM中移除，而不是仅仅用CSS隐藏。此时DOM里只有一个有效的路由出口，路由系统自然只会渲染到这个出口里，完美解决冲突问题。

替代方案（不用Angular CDK）： #

如果你不想引入CDK，可以自己监听window.resize事件：

ngOnInit() {
  this.checkScreenSize();
  window.addEventListener('resize', this.checkScreenSize.bind(this));
}

ngOnDestroy() {
  window.removeEventListener('resize', this.checkScreenSize.bind(this));
}

private checkScreenSize() {
  // 自定义断点，比如≥768px为桌面端
  this.isDesktop = window.innerWidth >= 768;
}

方案二：动态加载组件+路由监听（灵活可控） #

如果你的需求更复杂（比如需要给子组件传递额外参数，或者不想依赖路由出口），可以直接监听路由变化，根据屏幕尺寸把组件动态加载到对应容器中。

实现步骤： #

1. 模板中准备两个容器：

<div class="desktop-container" #desktopContainer *ngIf="isDesktop"></div>
<div class="mobile-container" #mobileContainer *ngIf="!isDesktop"></div>

2. 组件类中监听路由和屏幕尺寸，动态加载组件：

import { Component, ViewChild, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subject, takeUntil, filter } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styles: [`/* 布局样式同方案一 */`]
})
export class ParentComponent implements OnInit, OnDestroy {
  @ViewChild('desktopContainer', { read: ViewContainerRef }) desktopContainer!: ViewContainerRef;
  @ViewChild('mobileContainer', { read: ViewContainerRef }) mobileContainer!: ViewContainerRef;
  isDesktop = true;
  private destroy$ = new Subject<void>();

  constructor(
    private router: Router,
    private breakpointObserver: BreakpointObserver
  ) {}

  ngOnInit() {
    // 监听屏幕尺寸
    this.breakpointObserver.observe([Breakpoints.Web])
      .pipe(takeUntil(this.destroy$))
      .subscribe(result => {
        this.isDesktop = result.matches;
        this.reloadCurrentComponent();
      });

    // 监听路由变化
    this.router.events.pipe(
      takeUntil(this.destroy$),
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.reloadCurrentComponent();
    });
  }

  private reloadCurrentComponent() {
    // 获取当前路由对应的组件
    const currentRoute = this.router.routerState.root.firstChild;
    if (!currentRoute?.component) return;

    // 清空两个容器
    this.desktopContainer.clear();
    this.mobileContainer.clear();

    // 加载组件到目标容器
    const targetContainer = this.isDesktop ? this.desktopContainer : this.mobileContainer;
    targetContainer.createComponent(currentRoute.component);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

优缺点： #

• 优点：完全脱离路由出口的限制，对组件加载有绝对控制权，适合复杂场景。
• 缺点：需要手动处理组件加载，代码量比方案一多一些。

方案三：命名路由出口+动态切换（原生路由机制） #

如果你想保留Angular原生路由的特性，可以用命名路由出口，然后根据屏幕尺寸动态切换路由的出口目标。

实现步骤： #

1. 模板中定义两个命名路由出口：

<div class="desktop-container" *ngIf="isDesktop">
  <router-outlet name="desktop"></router-outlet>
</div>
<div class="mobile-container" *ngIf="!isDesktop">
  <router-outlet name="mobile"></router-outlet>
</div>

2. 路由配置中给每个子路由添加两个出口的规则：

import { Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { Page1Component } from './page1.component';
import { Page2Component } from './page2.component';

// 基础子路由
const childRoutes = [
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
];

// 生成带命名出口的路由
const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: childRoutes.flatMap(route => [
      { ...route, outlet: 'desktop' },
      { ...route, outlet: 'mobile' }
    ])
  }
];

export default routes;

3. 组件类中监听屏幕尺寸，切换路由出口：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subject, takeUntil, filter } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styles: [`/* 布局样式同方案一 */`]
})
export class ParentComponent implements OnInit, OnDestroy {
  isDesktop = true;
  private destroy$ = new Subject<void>();
  private currentPath = '';

  constructor(
    private router: Router,
    private breakpointObserver: BreakpointObserver
  ) {}

  ngOnInit() {
    // 监听屏幕尺寸
    this.breakpointObserver.observe([Breakpoints.Web])
      .pipe(takeUntil(this.destroy$))
      .subscribe(result => {
        const wasDesktop = this.isDesktop;
        this.isDesktop = result.matches;
        // 屏幕切换时重新导航到当前路径的对应出口
        if (wasDesktop !== this.isDesktop && this.currentPath) {
          this.router.navigate([{
            outlets: {
              [this.isDesktop ? 'desktop' : 'mobile']: this.currentPath.split('/'),
              [this.isDesktop ? 'mobile' : 'desktop']: null // 清空另一个出口
            }
          }]);
        }
      });

    // 记录当前路由路径
    this.router.events.pipe(
      takeUntil(this.destroy$),
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.currentPath = event.urlAfterRedirects.replace('/', '');
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

优缺点： #

• 优点：利用原生路由机制，适合需要保留路由状态的场景。
• 缺点：路由配置需要重复定义（可以用循环简化），代码复杂度比方案一高。

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