如何为ngb-timepicker的fieldset添加legend标签？

ngb-timepicker 官方没有提供直接配置legend的输入项，也没有对应的内容投影插槽，目前实际项目中验证过可用的方案有3种：

• 方案1：视图初始化后轻量DOM插入（改造成本最低）
  给ngb-timepicker套一层带模板引用的容器，在ngAfterViewInit生命周期里找到组件内部渲染出的fieldset元素，把自定义的legend插到第一个子节点位置即可，示例代码：

  import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'app-time-picker-wrap',
    template: `
      <div #tpContainer>
        <ngb-timepicker [(ngModel)]="selectedTime"></ngb-timepicker>
      </div>
    `
  })
  export class CustomTimePickerComponent implements AfterViewInit {
    @ViewChild('tpContainer') tpContainer!: ElementRef;
    selectedTime = { hour: 9, minute: 0 };
  
    ngAfterViewInit(): void {
      const builtInFieldset = this.tpContainer.nativeElement.querySelector('fieldset');
      if (builtInFieldset) {
        const legendEl = document.createElement('legend');
        legendEl.textContent = '预约时间';
        // 做无障碍适配的话可以加视觉隐藏类，不影响页面布局但读屏设备可识别
        legendEl.classList.add('visually-hidden');
        builtInFieldset.insertBefore(legendEl, builtInFieldset.firstChild);
      }
    }
  }
  

  这个方案改动最小，不需要调整现有组件的使用逻辑，几行代码就能实现。

• 方案2：自定义外层语义结构（最稳定，推荐用于无障碍场景）
  不需要操作DOM，直接在外层自己包一层带legend的fieldset，通过样式覆盖掉ngb-timepicker内置fieldset的默认浏览器样式即可，语义完全符合规范，也不会因为ng-bootstrap版本升级、内部DOM结构变动导致失效：

  <fieldset class="time-picker-fieldset">
    <legend>选择送达时间</legend>
    <ngb-timepicker [(ngModel)]="selectedTime" class="reset-inner-fieldset"></ngb-timepicker>
  </fieldset>
  

  对应样式：

  .reset-inner-fieldset fieldset {
    margin: 0;
    padding: 0;
    border: none;
    min-width: auto;
  }
  

• 方案3：封装成指令统一复用
  如果项目里有多处需要给timepicker加legend，可以写一个独立的属性指令，挂在ngb-timepicker标签上，支持通过输入属性传入legend文本、自定义样式类，内部自动完成DOM插入逻辑，避免重复代码。

注意：如果你的需求是满足无障碍合规要求，优先选方案2，静态语义结构读屏设备识别准确率最高，不会因为动态插入DOM出现识别遗漏的问题。

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