Question

我正在尝试在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
    }
}

Answer 1

您必须更改菜单的放置方向，您没有更改移动视图上的放置方向，这就是为什么它在右侧显示帮助的原因，请在移动display =“ bottom”时尝试此操作，在大屏幕上这是很好的放置方式= “右下”花了一些时间才能弄清楚，对于屏幕尺寸，您可以查看此线程 Detect window size using Angular 4

当屏幕较小时，此媒体查询会起作用

@media (min-width: 576px)
{
}

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

1 个答案: