如何根据设备类型调整Syncfusion菜单的排列方向

你可以通过监听视图宽度断点判断设备类型，动态绑定Syncfusion菜单组件的orientation属性实现方向切换，具体实现如下：

1. 导入所需依赖 #

在Angular项目的app.module.ts中导入菜单模块，如需使用Angular CDK的断点监听能力，可同时导入布局模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { LayoutModule } from '@angular/cdk/layout'; // 可选，用于断点监听
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, MenuModule, LayoutModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件逻辑中监听设备断点 #

在组件中监听视图宽度，一般以768px为分界判断移动端/桌面端，动态更新菜单方向变量：

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 菜单方向，默认桌面端为水平
  menuOrientation: 'Horizontal' | 'Vertical' = 'Horizontal';
  // 菜单数据示例
  menuItems = [
    { text: '首页' },
    { text: '产品', items: [{ text: '前端组件' }, { text: '后端服务' }] },
    { text: '关于我们' }
  ];

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    // 监听小于768px的断点（移动端场景）
    this.breakpointObserver.observe([Breakpoints.Handset])
      .subscribe(result => {
        if (result.matches) {
          // 移动端切换为垂直排列
          this.menuOrientation = 'Vertical';
        } else {
          // 桌面端保持水平排列
          this.menuOrientation = 'Horizontal';
        }
      });
  }
}

3. 模板中绑定菜单方向属性 #

在组件HTML模板中，将方向变量绑定到Syncfusion菜单的orientation输入属性：

<ejs-menu 
  [items]='menuItems' 
  [orientation]='menuOrientation'>
</ejs-menu>

补充说明 #

如果不想引入Angular CDK，也可以用原生JS的window.matchMedia实现断点监听，效果一致：

ngOnInit(): void {
  const mobileQuery = window.matchMedia('(max-width: 767px)');
  // 初始化判断
  this.menuOrientation = mobileQuery.matches ? 'Vertical' : 'Horizontal';
  // 监听窗口变化
  mobileQuery.addEventListener('change', (e) => {
    this.menuOrientation = e.matches ? 'Vertical' : 'Horizontal';
  });
}

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