如何在Angular项目中实现类似react-router-dom的Outlet功能？

要在Angular里实现父路径组件和子组件一同显示的效果，核心是用嵌套路由配合<router-outlet>标签，具体步骤如下：

• 配置嵌套路由
  在你的路由配置文件（通常是app-routing.module.ts）中，给父路由添加children数组来定义子路由。比如父路径为/dashboard，子路径对应不同的子组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './dashboard/profile/profile.component';
import { SettingsComponent } from './dashboard/settings/settings.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent, // 父组件
    children: [
      { path: 'profile', component: ProfileComponent }, // 子组件：个人资料
      { path: 'settings', component: SettingsComponent }, // 子组件：设置
      { path: '', redirectTo: 'profile', pathMatch: 'full' } // 访问/dashboard时默认加载profile
    ]
  }
];

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

• 在父组件中放置<router-outlet>
  打开父组件的模板文件（比如dashboard.component.html），在需要渲染子组件的位置添加<router-outlet>标签——这就是Angular里对应React Router Outlet的核心元素。父组件的其他内容会持续显示，子组件会嵌入到这个标签的位置：

<!-- 父组件的固定内容，始终显示 -->
<div class="dashboard-top-bar">
  <h2>我的仪表盘</h2>
  <div class="nav-links">
    <a routerLink="profile">个人资料</a>
    <a routerLink="settings">账户设置</a>
  </div>
</div>

<!-- 子组件会在这里渲染 -->
<router-outlet></router-outlet>

这样，当你访问/dashboard/profile或/dashboard/settings时，父组件DashboardComponent会先加载，同时对应的子组件会渲染到<router-outlet>的位置，父组件的头部导航等内容会和子组件一同展示，完全实现你要的效果。

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