如何在PrimeNG MenuModel菜单项中配置routerLink的fragment参数？

我来帮你解决这个问题～在PrimeNG的MenuModel里配置带fragment的路由链接其实很直接，和你用原生Angular routerLink的逻辑一致，具体做法如下：

1. 直接在MenuModel中配置路由参数 #

PrimeNG的MenuItem接口原生支持routerLink和fragment属性，你只需要在定义菜单项数组时，把这两个属性对应配置好就行：

组件代码示例 #

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

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

  ngOnInit(): void {
    this.menuItems = [
      {
        label: '显示组件并滚动到#fragment_id',
        routerLink: ['/component'], // 对应Angular路由的路径数组
        fragment: 'fragment_id' // 这里就是你要跳转的锚点ID
      },
      // 可以添加更多带fragment的菜单项
      {
        label: '跳转到首页的头部区域',
        routerLink: ['/home'],
        fragment: 'header-section'
      }
    ];
  }
}

模板代码示例 #

在模板中引用这个菜单模型即可：

<p-menu [model]="menuItems"></p-menu>

2. 配置Angular路由的滚动行为（关键补充） #

默认情况下，Angular路由切换后不会自动滚动到指定的fragment，所以需要在路由模块中启用锚点滚动功能，确保跳转后页面能滚动到目标位置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由配置项
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled', // 启用锚点滚动
    scrollPositionRestoration: 'enabled', // 切换路由时恢复滚动位置
    scrollOffset: [0, 64] // 如果页面有固定顶部导航栏，可设置偏移量（比如64px高度的导航栏）
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 验证效果 #

确保页面中存在对应ID的元素，比如：

<div id="fragment_id">
  <!-- 这是你要滚动到的目标区域 -->
</div>

点击菜单项后，就会跳转到/component路由，并自动滚动到ID为fragment_id的元素位置，和你用原生<a [routerLink]="['/component']" fragment="fragment_id">的效果完全一致。

内容的提问来源于stack exchange，提问作者David L.