如何将ng-bootstrap的tabs组件转换为移动端适配的accordion组件？

实现核心思路 #

根据视图宽度断点，在桌面端渲染tabset组件，移动端渲染accordion组件，两者共用同一套内容模板和激活状态变量，同时开启accordion的互斥折叠属性满足需求。 #

具体实现步骤 #

• 第一步：导入依赖模块
  在对应的Angular模块中引入NgbTabsetModule、NgbAccordionModule、LayoutModule（用于断点检测）。
• 第二步：组件类逻辑编写
  注入BreakpointObserver检测视图断点，定义全局激活状态变量同步两个组件的选中项：

  import { Component } from '@angular/core';
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  import { map } from 'rxjs';
  
  @Component({
    selector: 'app-tab-accordion-switch',
    templateUrl: './tab-accordion-switch.component.html'
  })
  export class TabAccordionSwitchComponent {
    // 移动端断点判断，可自定义宽度阈值
    isMobile$ = this.breakpointObserver.observe('(max-width: 767.98px)').pipe(
      map(result => result.matches)
    );
    // 同步tab和accordion的激活项ID
    activeId = 'tab-1';
  
    constructor(private breakpointObserver: BreakpointObserver) {}
  }
  

• 第三步：模板层实现响应式切换和状态同步
  将内容抽为复用模板，桌面端显示tabset，移动端显示accordion，开启accordion的closeOthers属性实现展开自动折叠其余项：

  <!-- 桌面端Tabset -->
  <ngb-tabset *ngIf="!(isMobile$ | async)" [(activeId)]="activeId">
    <ngb-tab id="tab-1" title="标签1">
      <ng-template ngbTabContent>
        标签1的内容
      </ng-template>
    </ngb-tab>
    <ngb-tab id="tab-2" title="标签2">
      <ng-template ngbTabContent>
        标签2的内容
      </ng-template>
    </ngb-tab>
    <ngb-tab id="tab-3" title="标签3">
      <ng-template ngbTabContent>
        标签3的内容
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
  
  <!-- 移动端Accordion -->
  <ngb-accordion *ngIf="isMobile$ | async" [(activeId)]="activeId" [closeOthers]="true">
    <ngb-panel id="tab-1" title="标签1">
      <ng-template ngbPanelContent>
        标签1的内容
      </ng-template>
    </ngb-panel>
    <ngb-panel id="tab-2" title="标签2">
      <ng-template ngbPanelContent>
        标签2的内容
      </ng-template>
    </ngb-panel>
    <ngb-panel id="tab-3" title="标签3">
      <ng-template ngbPanelContent>
        标签3的内容
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
  

• 第四步（可选优化）：如果内容逻辑复杂，可将每个标签的内容单独封装为子组件，避免在模板中重复写内容代码。

关键配置说明 #

• 断点阈值可根据业务需求自定义，默认768px为移动端和桌面端的分界点
• [closeOthers]="true"是实现展开某一项自动折叠其余项的核心配置，ng-bootstrap的accordion原生支持该属性
• 双向绑定activeId保证切换视图时用户选中的内容不会发生跳转，体验一致

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