li在路由到Angular中的不同html页面时不会消失,为什么？

Question

我有一个页面,我有一张桌子.有一列名为"Actions".

一旦用户单击任何行中的action-column,操作菜单将显示Edit和Delete.一旦用户点击编辑,我就会重定向到另一个html页面.

一切都很好.但重定向到另一个页面后,菜单不会消失.如果我返回并再次单击操作列,则会出现带有编辑和删除的新菜单.

<p-dataTable #dataTable>
    <p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'25px'}">
        <ng-template let-record="rowData" pTemplate="body">
            <div class="btn-group dropdown" normalizePosition>
                <button class="dropdown-toggle btn btn-xs btn-primary blue"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="fa fa-cog"></i>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a (click)="onEditClick(record, $event)">{{ l('Edit') }}</a>
                    </li>
                    <li>
                        <a (click)="onDeleteClick(record, $event)">{{ l('Delete') }}</a>
                    </li>
                </ul>
            </div>
        </ng-template>
    </p-column>
</p-dataTable>

onEditClick(selectedValue: any): void {
   this.router.navigate(['/app/xyz/pqr', selectedClassification.id]);
}

Answer 1

您将 Angular 与普通的引导 JavaScript 混合在一起。每次点击 DropDown 时，bootstrap-JavaScript 都会在 html 标记底部的某个位置创建菜单。

Angular-router 仅更新您的 内部的标记router-outlet，因此附加的菜单标记不会在导航时被删除。

尝试使用像这样的角度特定引导版本：
https
://ng-bootstrap.github.io/#/components/dropdown/examples 他们应该已经实现了您的问题的解决方案，并且它将避免更多即将出现的问题;-)