Angular路由场景下，静态展示是否必须创建新组件？

Angular的路由机制必须绑定组件实例，没法让router-outlet直接渲染纯静态HTML，但可以通过两种简洁方式避免创建多余的空组件类，实现需求：

方法1：路由内直接定义模板与样式 #

在app-routing.module.ts的路由配置中，直接通过template和styles字段定义静态内容，无需创建单独的组件文件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 其他路由配置
  {
    path: 'about',
    template: `
      <div class="about-wrap">
        <h1>关于我们</h1>
        <p>这里是静态的About页面内容，无需额外组件类</p>
        <p>任意静态HTML结构都可以直接写在这里</p>
      </div>
    `,
    styles: [`
      .about-wrap { padding: 30px; background: #f5f5f5; border-radius: 8px; }
      h1 { color: #333; margin-bottom: 15px; }
    `]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这种方式本质是用了Angular的匿名组件，但不需要手动创建组件类文件，完全满足“无需新组件”的诉求。

方法2：引用外部静态模板/样式文件 #

如果静态内容较多，不想写在路由文件里，可以通过templateUrl和styleUrls直接指向单独的HTML/CSS文件，同样无需组件类：

// app-routing.module.ts
const routes: Routes = [
  // 其他路由配置
  {
    path: 'about',
    templateUrl: './about-static.html',
    styleUrls: ['./about-static.css']
  }
];

然后在项目目录下创建about-static.html和about-static.css文件，写入静态内容即可。

关键说明 #

Angular的router-outlet只能渲染组件实例，所以完全跳过组件是不可能的，但上述两种方式都避免了创建冗余的空组件类，用最简洁的方式实现静态内容的路由渲染，同时保持app-component的header和footer不刷新。

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