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

Posted 2023-03-05

【中文标题】li 在 Angular 中路由到不同的 html 页面时不会消失，为啥？

【英文标题】：li does not disappear on routing to different html page in Angular, Why?li 在 Angular 中路由到不同的 html 页面时不会消失，为什么？

【发布时间】：2018-02-12 15:25:30

【问题描述】：

我有一个页面，我有一张桌子。有一列名为“操作”。

一旦用户单击任何行中的操作列，操作菜单就会显示编辑和删除。一旦用户单击编辑，我就会重定向到另一个 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]);

【问题讨论】：

您希望拥有什么样的行为？菜单应该在路由到另一个页面时消失？

@MarkusKollers 是的，当然，它应该消失。

你使用的是普通引导程序？

是的，简单的 bootstarp

你能在stackblitz中复制这个问题吗？会很容易帮助

【参考方案1】：

您正在将 Angular 与普通的引导 javascript 混合使用。每次点击 DropDown 时，bootstrap-JavaScript 都会在 html 标记底部的某处创建菜单。

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

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

【讨论】：

但是我在其他页面上使用的一样，它在那里工作正常

您使用的是同一个组件（下拉），您没有手动关闭它并且它在路由中消失？

是的，那么我需要在哪里以及如何关闭？

在这种情况下如何导航？使用 router.navigate(..)？或者<a href="...">...</a> 或window.location？

Router.navigate ，我在我的问题中提到了这一点