ngx-bootstrap 下拉菜单在移动视图中嵌套子菜单

Posted 2023-03-05

【中文标题】ngx-bootstrap 下拉菜单在移动视图中嵌套子菜单

【英文标题】：ngx-bootstrap dropdowns nested submenu in mobile view

【发布时间】：2019-09-11 23:30:27

【问题描述】：

我正在尝试在 Angular 中创建一个菜单系统，它支持左右两侧的菜单和子菜单，并且在移动设备上看起来不错。我已经能够使用 ngx-bootstrap 获得最大的成功，我尝试了其他一些库但收效甚微。

我的代码的问题是，在移动视图中，它只能部分工作，初始菜单看起来不错，但点击菜单仍然会创建一个弹出窗口。如果我取出一些 container="body" 参数，它在移动设备上可以正常工作，但在桌面设备上不行。

https://stackblitz.com/edit/angular-hmmqx1

menu.component.html

<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler navbar-toggler-right nav-link" (click)="isCollapsed = !isCollapsed" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-bars">Menu</i>
</button>
<div class="navbar-collapse collapse" container="body" [collapse]="isCollapsed" id="navbarNavDropdown">
    <ul class="navbar-nav col-md-12">
        <li *ngFor="let menu of leftItems" class="nav-item">
            <div *ngIf="!menu.items" container="body">
                <a *ngIf="!menu.items" class="nav-link" href="#">
                    <i *ngIf="menu.icon" class=" menu.icon "></i> menu.label 
                </a>
            </div>
            <div *ngIf="menu.items" class="navbar-collapse collapse" dropdown container="body" [collapse]="isCollapsed">
                <a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#">
                    <i class=" menu.icon "></i> menu.label 
                </a>
                <ul *dropdownMenu class="dropdown-menu">
                    <ng-container  *ngFor="let item of menu.items">
                        <li *ngIf="!item.items" role="menuitem">
                            <a class="dropdown-item">
                                <i *ngIf="item.icon" class=" item.icon "></i>item.label
                            </a>
                        </li>
                        <li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top right" container="body">
                            <a class="dropdown-item" (click)="false"> item.label <i class="fas fa-caret-right dropdown-submenu"></i></a>
                            <ul *dropdownMenu class="dropdown-menu" role="menu">
                                <ng-container  *ngFor="let submenu of item.items">
                                    <li role="menuitem">
                                        <a class="dropdown-item" href="#">
                                            <i *ngIf="submenu.icon" class=" submenu.icon "></i> submenu.label 
                                        </a>
                                    </li>
                                    <li *ngIf="submenu.divider" class="divider dropdown-divider"></li>
                                </ng-container>
                            </ul>
                        </li>
                        <li *ngIf="item.divider" class="divider dropdown-divider"></li>
                    </ng-container>
                </ul>
            </div>
        </li>
        <li class="nav-item ml-auto"></li>
        <li *ngFor="let menu of rightItems" class="nav-item">
            <div *ngIf="!menu.items" container="body">
                <a *ngIf="!menu.items" class="nav-link" href="#">
                    <i *ngIf="menu.icon" class=" menu.icon "></i> menu.label 
                </a>
            </div>
            <div *ngIf="menu.items" dropdown container="body" placement="bottom right">
                <a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#"><i class=" menu.icon "></i> menu.label </a>
                <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
                    <ng-container  *ngFor="let item of menu.items">
                        <li *ngIf="!item.items" role="menuitem">
                            <a class="dropdown-item">
                                <i *ngIf="item.icon" class=" item.icon "></i>item.label
                            </a>
                        </li>
                        <li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top left" container="body">
                            <a class="dropdown-item" (click)="false"><i class="fas fa-caret-left dropdown-submenu-left"></i> item.label </a>
                            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                                <ng-container  *ngFor="let submenu of item.items">
                                    <li role="menuitem">
                                        <a class="dropdown-item" href="#">
                                            <i *ngIf="submenu.icon" class=" submenu.icon "></i> submenu.label 
                                        </a>
                                    </li>
                                    <li *ngIf="submenu.divider" class="divider dropdown-divider"></li>
                                </ng-container>
                            </ul>
                        </li>
                        <li *ngIf="item.divider" class="divider dropdown-divider"></li>
                    </ng-container>
                </ul>
            </div>
        </li>
    </ul>
</div>

menu.component.ts

import  Component, OnInit  from '@angular/core';

@Component(
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss'],
)
/**
 * Main Menu
 */

export class MenuComponent implements OnInit 
    leftItems: any[];
    rightItems: any[];
    isCollapsed = true;

    ngOnInit(): void 

        this.leftItems = [
        
            label: 'Single Item',
            routerLink: '/single'
        ,
        
            label: 'Left Menu',
            icon: 'fas fa-puzzle-piece',
            items: [
                label: 'Something', routerLink: '/something'
                ,
                label: 'Templates', routerLink: '/templates', divider: true,
                label: 'Proposals', routerLink: '/props',
                label: 'Other Things', routerLink: '/other', divider: true,
                label: 'Submneu', items: this.getDynamicMenu() ,               
                label: 'New Stuff', routerLink: '/new', icon: 'fas fa-plus',                                                                                                          
                ]
            ,
        ];

        this.rightItems = [
            
                label: 'Help', icon: 'fas fa-life-ring',
                items: [
                    label: 'Help Docs', items: [label: 'Submenu Test']
                ]
            , 
                label: 'User', icon: 'fas fa-user',
                items: [
                    label: 'Logout'
                ]
            ,]
    

    getDynamicMenu() 
        const testNames = ['Test1', 'Test2', 'Test3'];
        const dynamicSubmenu = [];
        for(const menuName of testNames) 
            dynamicSubmenu.push(label: 'Submenu - ' + menuName, routerLink: '/submenus/' + menuName.toLowerCase());
        
        return dynamicSubmenu
    

【问题讨论】：

我刚刚在 Chrome 中尝试过，具有移动和桌面视图，它们看起来非常好。能否请您详细说明您遇到的具体问题，可能是截图，具体的平台描述？

在移动视图中，单击菜单项会显示一个弹出窗口。 “帮助”显示在右侧，看起来很有趣。我宁愿它们在移动时垂直扩展而不是弹出菜单。

【参考方案1】：

你必须改变菜单的放置方向，你没有改变移动视图上的放置方向，为什么它在右侧显示帮助，当移动放置=“底部”时尝试这个，在大屏幕上这是很好的放置= “右下角”需要时间来弄清楚， 对于屏幕尺寸，您可以查看此线程 Detect window size using Angular 4

此媒体查询在屏幕尺寸较小时发挥作用

@media (min-width: 576px)