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

Question

我有一个页面，我有一个 table。有一列名为 "Actions"。

一旦用户单击任意行中的操作列，操作菜单就会显示为“编辑”和“删除”。一旦用户点击编辑，我就会重定向到另一个 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 与纯 bootstrap JavaScript 混合。每次点击 DropDown 时，bootstrap-JavaScript 都会在 html 标记底部的某处创建菜单。

angular-路由器仅更新 router-outlet 内的标记，因此导航时不会删除附加的菜单标记。

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

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

li does not disappear on routing to different html page in Angular, Why?

html

twitter-bootstrap

angular2-routing

angular