Angular 14.2.0：如何继承HTML标签或移除DOM中的组件标签

问题场景 #

使用Angular 14.2.0时，遇到两处组件重构后的异常：

1. Bootstrap栅格布局异常：想要实现container-fluid -> row -> col-2/col的层级结构，但将col部分拆分为组件后，Angular生成的组件标签（如<app-sidebar>）会插入到row和col-2之间，导致Bootstrap栅格样式无法正确识别（Bootstrap要求row的直接子元素必须是col-*类的元素）。
2. Leaflet地图组件重构后功能异常：未拆分为组件时功能正常，重构后组件宿主元素破坏了Leaflet依赖的DOM结构。

期望的理想DOM结构：

<div class="container-fluid">  <!-- 第一个组件 -->
  <div class="row">            <!-- 第一个组件 -->
    <div class="col-2"></div>  <!-- 第二个组件 -->
    <div class="col"></div>   <!-- 第三个组件 -->
  </div>
</div>

实际编写的代码示例：

<app-navbar></app-navbar>

<app-sidenav>
  <sidenav-menu
    mdbCollapse
    #sidenav="mdbCollapse"
    id="sidenavId"
  >
<!--   <app-sidebar></app-sidebar>-->
  </sidenav-menu>

  <sidenav-content>
    <div class="bg-black text-white">hello </div>
  </sidenav-content>
</app-sidenav>
<div class="btn btn-primary"
      type="button"
     (click)="sidenav.toggle()"
     [attr.aria-expanded]="!sidenav.collapsed"
     aria-controls="sidenavId"
>show</div>
<app-footer></app-footer>

问题根源 #

Angular组件默认会生成一个宿主元素（即组件的selector对应的标签，如<app-sidebar>），这个额外的标签会插入到DOM结构中，破坏了Bootstrap、Leaflet这类依赖严格DOM层级/结构的库的工作逻辑。

解决方法 #

1. 使用属性选择器定义组件（推荐） #

将组件的selector从标签选择器改为属性选择器，让组件逻辑直接附加到现有DOM元素上，避免生成额外的宿主标签。

示例：
定义SidebarComponent时，修改selector：

@Component({
  selector: '[app-sidebar]', // 用属性选择器替代标签选择器
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent { }

在父组件模板中，直接在需要的col-2元素上应用该组件：

<div class="container-fluid">
  <div class="row">
    <div class="col-2" app-sidebar></div> <!-- 组件逻辑附加到col-2元素，无额外标签 -->
    <div class="col" app-content></div>
  </div>
</div>

这种方式完全消除了宿主元素的干扰，完美适配Bootstrap栅格的层级要求，同样适用于Leaflet组件：将组件附加到Leaflet需要的地图容器元素上即可。

2. 调整组件模板结构（适用于部分场景） #

如果必须保留组件标签，可将组件的根元素设置为需要的布局元素（如col-2），同时确保父组件的DOM层级符合要求。

示例SidebarComponent模板：

<div class="col-2">
  <!-- 组件内部内容 -->
</div>

父组件模板使用：

<div class="row">
  <app-sidebar></app-sidebar>
</div>

⚠️ 注意：这种方式下，<app-sidebar>宿主标签仍然存在于row和col-2之间，部分严格依赖直接父子关系的样式可能仍会失效，因此优先推荐属性选择器方案。

补充说明 #

Angular的样式封装（ViewEncapsulation）与此问题无关，核心是组件宿主元素对DOM结构的破坏。服务端渲染（SSR）不会导致组件标签缺失，反而SSR生成的DOM结构和客户端一致，问题本质还是组件的DOM结构设计不符合第三方库的要求。

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