如何填充模型及窗口大小变化后重新加载PrimeNG TabMenu显示滚动图标？

问题核心 #

当延迟从接口加载TabMenu的model且未预先初始化时，标签渲染完成后左右滚动图标不显示；但预先初始化model再修改则正常。这是因为TabMenu仅在初始化阶段（ngAfterViewInit）自动计算标签宽度并判断是否显示滚动按钮，延迟赋值后未触发重新计算。

解决方案 #

1. 延迟设置模型后手动触发滚动初始化

通过@ViewChild获取TabMenu实例，在模型赋值完成后调用其内部的滚动计算方法：

import { Component, ViewChild, OnInit } from '@angular/core';
import { TabMenu } from 'primeng/tabmenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @ViewChild(TabMenu) tabMenu!: TabMenu;
  model: MenuItem[] = [];

  ngOnInit(): void {
    // 模拟异步接口请求
    setTimeout(() => {
      // 从数据库获取菜单项并赋值
      this.model = [
        { label: '用户管理' },
        { label: '权限配置' },
        { label: '系统设置' },
        { label: '数据统计' },
        { label: '日志查询' },
        { label: '报表导出' },
        { label: '消息通知' }
      ];

      // 确保DOM更新后触发滚动计算
      setTimeout(() => {
        this.tabMenu.initScroll();
        this.tabMenu.updateScroll();
      }, 0);
    }, 1000);
  }
}

2. 监听窗口 resize 事件，动态更新滚动状态

当窗口大小变化时，重新计算标签宽度并更新滚动按钮显示状态：

// 在组件类中添加以下代码
@HostListener('window:resize')
onWindowResize(): void {
  if (this.tabMenu) {
    this.tabMenu.updateScroll();
  }
}

原理说明 #

• initScroll()：初始化滚动容器的相关参数（如滚动容器宽度、标签总宽度）
• updateScroll()：根据当前容器和标签的宽度，判断是否显示左右滚动按钮，并更新滚动状态

预先初始化model时，TabMenu在ngAfterViewInit阶段已执行过一次滚动计算，后续修改model时会触发变更检测并重新计算；而未预先初始化时，初始阶段无标签，滚动计算逻辑未生成有效参数，延迟赋值后需手动触发重新计算。

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