Angular路由跳转后仅显示目标组件HTML的实现方法咨询

你的问题核心是当前路由把employee-form组件渲染在了共享布局（比如导航栏、侧边栏这类原有页面内容）的<router-outlet>里，导致组件内容和原有布局共存。以下是具体解决方式：

1. 拆分路由布局（最直接的方案） #

把需要全屏展示的路由和带共享布局的路由分开配置，让employee-form作为顶级路由，不嵌套在布局组件下：

在app-routing.module.ts里修改路由配置：

const routes: Routes = [
  // 带共享布局的路由组（比如首页、员工列表页）
  {
    path: '',
    component: LayoutComponent, // 这个组件包含导航栏、侧边栏和内部的<router-outlet>
    children: [
      { path: 'employees', component: EmployeeListComponent },
      // 其他需要保留原有布局的路由
    ]
  },
  // 单独全屏展示的路由，直接挂载到根路由
  { path: 'employee-form', component: EmployeeFormComponent },
  // 其他需要全屏的路由也可以放在这里
];

这样配置后，访问/employee-form时，Angular会直接渲染EmployeeFormComponent的内容，不会加载LayoutComponent里的原有页面元素。

2. 检查主模板的<router-outlet>位置 #

如果你的app.component.html里直接写了导航栏+<router-outlet>，那所有路由都会在这个出口渲染，导致原有内容一直存在。解决办法是：

• 把导航栏、侧边栏这些共享布局抽成独立的LayoutComponent
• 把需要共享布局的路由通过children嵌套在LayoutComponent的路由下，单独页面路由作为顶级路由

3. 确认routerLink的路径正确性 #

确保跳转的路由是顶级路径，比如：

<a routerLink="/employee-form">打开员工表单</a>

不要使用相对路径（比如./employee-form），避免组件被嵌套到当前路由的子路由下，导致和原有页面内容共存。

4. 动态控制布局显示（可选） #

如果需要根据路由动态切换布局显示状态，可以在布局组件里监听路由变化：
在LayoutComponent的ts文件中：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class LayoutComponent {
  showLayout = true;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 判断当前路由是否是全屏路由，控制布局显示
      this.showLayout = !event.url.includes('/employee-form');
    });
  }
}

然后在LayoutComponent的模板里用*ngIf控制布局元素：

<nav *ngIf="showLayout">导航栏内容</nav>
<aside *ngIf="showLayout">侧边栏内容</aside>
<router-outlet></router-outlet>

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