Angular路由激活时如何仅渲染目标组件，不显示根组件头部与底部？

场景与问题 #

我有一个简单的Users组件，已在app.routing.module.ts中配置了/Users路由。根组件app.component.html采用常规结构：

<header>
...
</header>
<router-outlet></router-outlet>
<footer>
...
</footer>

正常导航到/Users时，UserComponent会被插入到router-outlet中，同时header和footer也会一同渲染。但现在需要将该组件作为嵌入页面部署到第三方工具中，不希望显示根组件里的header和footer。

我曾尝试在路由配置中传入布尔类型的renderRoot数据对象，以此条件渲染header和footer，但根组件无法接收这个data对象，只有子组件（User组件）能获取到，因此该方法无效。

已实现的解决方案 #

后来我通过在app.component.ts中监听路由变化，结合路径标识实现了需求：

this.activatedRoute.url.subscribe((event) => {
  if (this.location.path().toLowerCase().includes('thirdparty')) {
    this.isThirdParty = true;
  } else {
    this.isThirdParty = false;
  }
});

之后用isThirdParty这个布尔标志，在app.component.html中通过*ngIf控制header、侧边栏和footer的显示与隐藏。同时我将所有需要嵌入第三方的组件路由路径都统一包含thirdparty段（比如/thirdparty/users）。

优化方案（更灵活的实现） #

如果不想依赖路径字符串的硬判断，可以改用路由配置的data字段来标记：

1. 先在路由配置中给第三方路由添加标识：

const routes: Routes = [
  { path: 'users', component: UsersComponent },
  { path: 'thirdparty/users', component: UsersComponent, data: { hideRootLayout: true } },
  // 其他第三方路由同理
];

2. 然后在app.component.ts中监听路由事件，读取当前路由的data：

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

// ...

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    const currentRoute = this.router.routerState.root.firstChild;
    this.isThirdParty = currentRoute?.data?.['hideRootLayout'] ?? false;
  });
}

这种方式不需要硬编码路径关键词，后续路由调整时更易维护。

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