独立模式下如何结合子路由与包装组件实现路由配置？

核心配置思路 #

和模块式路由的结构逻辑完全一致，只需适配独立组件特性：所有组件标记为standalone: true，路由通过provideRouter注入，懒加载用loadChildren（加载独立路由配置）或loadComponent（加载单个组件）实现。

步骤1：配置根路由（app.routes.ts） #

import { Routes } from '@angular/router';
import { IntroPageComponent } from './intro-page/intro-page.component';
import { LayoutWrapperComponent } from './layout-wrapper/layout-wrapper.component';

export const APP_ROUTES: Routes = [
  // 根路径显示无布局的IntroPage
  {
    path: '',
    component: IntroPageComponent
  },
  // /app路径使用带头部/页脚的布局组件
  {
    path: 'app',
    component: LayoutWrapperComponent,
    children: [
      // 懒加载products路由到布局的router-outlet中
      {
        path: 'products',
        loadChildren: () => import('./products/products.routes').then(m => m.PRODUCTS_ROUTES)
      }
    ]
  }
];

步骤2：定义懒加载的products路由（products.routes.ts） #

如果products包含多个子页面，单独创建路由配置文件：

import { Routes } from '@angular/router';
import { ProductsListComponent } from './products-list/products-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

export const PRODUCTS_ROUTES: Routes = [
  { path: '', component: ProductsListComponent },
  { path: ':id', component: ProductDetailComponent }
];

若仅需懒加载单个组件，可直接在根路由中替换为：

{
  path: 'products',
  loadComponent: () => import('./products/products-list/products-list.component').then(m => m.ProductsListComponent)
}

步骤3：确保组件为独立组件 #

所有用到的组件必须标记standalone: true，并导入依赖模块：

• IntroPageComponent（无布局）：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-intro-page',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './intro-page.component.html'
})
export class IntroPageComponent {}

• LayoutWrapperComponent（带头部、页脚和router-outlet）：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; // 必须导入RouterModule才能使用router-outlet

@Component({
  selector: 'app-layout-wrapper',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <header>页面头部</header>
    <main><router-outlet></router-outlet></main> <!-- 懒加载内容会渲染到这里 -->
    <footer>页面页脚</footer>
  `
})
export class LayoutWrapperComponent {}

步骤4：在main.ts中注入路由 #

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { APP_ROUTES } from './app.routes';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(APP_ROUTES)]
});

配置完成后，访问根路径/会显示不带头部/页脚的IntroPageComponent；访问/app/products时，LayoutWrapperComponent先渲染头部和页脚，再将懒加载的products组件渲染到内部的router-outlet中。

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