Angular中<router-outlet>标签的作用是什么？请举例说明

<router-outlet>是Angular路由系统里的动态内容占位符——简单说，它就是个“容器”，会根据当前浏览器地址栏的路径，自动渲染你预先配置好的对应组件。

下面用一个极简的单页应用示例，一步步拆解它的功能：

第一步：配置路由规则 #

先在app-routing.module.ts里定义路由映射，告诉Angular“哪个路径对应哪个组件”：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 根路径 → 显示Home组件
  { path: 'users', component: UserListComponent }, // /users → 显示用户列表
  { path: 'users/:id', component: UserDetailComponent } // /users/1 → 显示用户详情
];

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

第二步：在主模板里放置<router-outlet> #

打开app.component.html，这是应用的主页面模板，我们放个固定导航栏，再加上<router-outlet>：

<!-- 固定导航栏，不会随路由切换变化 -->
<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/users">用户列表</a>
</nav>

<!-- 动态内容区域：路由匹配的组件会在这里渲染 -->
<router-outlet></router-outlet>

第三步：编写子组件的简单内容 #

• home.component.html：

<h2>这是首页内容</h2>
<p>欢迎来到我的单页应用！</p>

• user-list.component.html：

<h2>用户列表</h2>
<ul>
  <li><a routerLink="/users/1">用户1</a></li>
  <li><a routerLink="/users/2">用户2</a></li>
</ul>

• user-detail.component.html：

<h2>用户详情</h2>
<p>当前用户ID：{{ (route.params | async).id }}</p>

（注：这里的route是通过构造函数注入的ActivatedRoute，用来获取URL中的参数）

运行效果说明 #

1. 访问应用根路径（/）时，<router-outlet>的位置会被HomeComponent的内容替换，页面显示“首页内容”+ 固定导航栏；
2. 点击“用户列表”链接，地址栏变成/users，<router-outlet>区域自动切换成UserListComponent的用户列表，导航栏保持不变；
3. 点击“用户1”，地址栏变成/users/1，<router-outlet>又换成UserDetailComponent的详情内容，导航栏依然固定。

核心价值总结 #

• 实现单页应用（SPA）的视图无刷新切换：不用重新加载整个页面，只替换<router-outlet>区域的内容；
• 保持页面公共部分（比如导航、页脚）的稳定性，提升用户体验；
• 让路由规则和视图渲染解耦，你只需要维护路由配置和组件，不用手动操作DOM切换内容。

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