具有ng-bootstrap的metismenu的折叠功能

时间:2017-05-25 16:35:03

标签: angular menu ng-bootstrap metis

我正在使用metismenu和ng-bootstrap与Angular 4.我面临的问题是aria-expanded设置不正确。

以下是我在Angular中的代码。

<ul class="nav metismenu" id="side-menu">
<ng-template [ngIf]="user.haveAccess('menu1')">
    <li [ngClass]="{'active': !isCollapsed}">
        <a (click)="onCollapsed()" [attr.aria-expanded]="!isCollapsed">Menu1</a>
        <ul class="nav nav-second-level" [ngbCollapse]="isCollapsed" [attr.aria-expanded]="!isCollapsed">
            <li><a href="#">SubMenu1</a></li>
            <li><a href="#">SubMenu2</a></li>
            <li><a href="#">SubMenu3</a></li>
        </ul>
    </li>
</ng-template>
</ul>

以下是第一次加载页面时的html,正如预期的那样。

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse" ng-reflect-collapsed="true" aria-expanded="false">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

但是当我点击Menu1时,菜单会扩展。该页面变得如下。为什么<a _ngcontent-c2="" aria-expanded="false">Menu1</a>确实变为真?

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]" class="active">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse show" ng-reflect-collapsed="false" aria-expanded="true">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

我觉得metismenu和ng-bootstrap试图同时更新aria扩展。这是metismenu中的问题还是我在代码中遗漏的任何内容?

请参见下面的截图

加载页面时。

enter image description here

首次点击Menu1时,菜单已展开,但aria-expanded未更改为true <a _ngcontent-c2="" aria-expanded="false">Menu1</a>

enter image description here

当第二次点击Menu1时,菜单崩溃并且扩展得非常快。

当第三次单击Menu1时,菜单无法折叠但css已折叠。

enter image description here

0 个答案:

没有答案