Angular 17：如何在模板中使用多router-outlet并避免代码重复

你当前的实现存在大量路由配置重复的问题，根本不需要为移动端和桌面端分别配置命名路由出口。通过以下方式可以大幅简化代码，同时实现响应式布局需求：

1. 简化路由配置（app.routes.ts） #

删除重复的命名出口路由，只保留一套默认路由配置：

export const routes: Routes = [
  { path: '', component: SummaryViewComponent },
  { path: 'summary', component: SummaryViewComponent },
  { path: 'task', component: TaskViewComponent },
  { path: 'board', component: BoardViewComponent },
  { path: 'contacts', component: ContactViewComponent },
  { path: 'privacy-policy', component: ContactViewComponent },
  { path: 'legal-notice', component: ContactViewComponent },
];

2. 重构模板结构（app.component.html） #

使用单个默认router-outlet，通过CSS控制导航组件的显示和布局顺序：

<div class="app-container">
  <app-header></app-header>
  <app-navigation-desktop></app-navigation-desktop>
  <router-outlet></router-outlet>
  <app-navigation-mobile></app-navigation-mobile>
</div>

3. 优化响应式样式（app.component.scss） #

通过媒体查询控制不同屏幕尺寸下的布局结构和组件显示：

:host {
  height: 100%;
  display: block;
}

.app-container {
  height: 100%;
  display: grid;
}

// 默认移动端布局
.app-container {
  grid-template-columns: 1fr;
  grid-template-rows: var(--header-height) auto auto;
  grid-template-areas: 
    "header"
    "router-outlet"
    "navigation-mobile";
}

app-navigation-desktop {
  display: none;
}

app-navigation-mobile {
  grid-area: navigation-mobile;
}

// 桌面端布局（≥768px）
@media screen and (min-width: 768px) {
  .app-container {
    grid-template-columns: 200px calc(100% - 200px);
    grid-template-rows: var(--header-height) auto;
    grid-template-areas: 
      "navigation-desktop header"
      "navigation-desktop router-outlet";
  }

  app-navigation-desktop {
    display: block;
    grid-area: navigation-desktop;
  }

  app-navigation-mobile {
    display: none;
  }
}

app-header {
  grid-area: header;
}

router-outlet {
  grid-area: router-outlet;
}

// 可选调试边框
.app-container > * {
  border: 5px solid red;
}

方案优势 #

• 路由配置减少50%，彻底消除重复代码，降低维护成本
• 布局逻辑完全由CSS媒体查询控制，符合响应式设计最佳实践
• 单个默认路由出口避免了命名路由带来的额外跳转复杂度

可选：TS层面响应式控制（复杂场景） #

如果需要在组件类中根据屏幕尺寸执行逻辑，可以使用Angular的BreakpointObserver：

1. 导入依赖：

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

2. 组件内监听屏幕尺寸：

isMobile = false;

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([Breakpoints.Handset])
    .subscribe(result => {
      this.isMobile = result.matches;
    });
}

3. 模板中用*ngIf控制组件：

<div class="app-container">
  <app-header></app-header>
  <app-navigation-desktop *ngIf="!isMobile"></app-navigation-desktop>
  <router-outlet></router-outlet>
  <app-navigation-mobile *ngIf="isMobile"></app-navigation-mobile>
</div>

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