0

我在导航栏内使用带有下拉菜单的 ng2-bootstrap 导航栏。如果您在下面的代码段中向下看大约一半，*ngIf="userHasPermission()"您将看到下拉菜单的内容。我发现我必须使用带有 href 值的锚来重新加载整个页面，以便让浏览器导航到请求的 URL。在 selectRecord 函数中，我有同样的问题；router.navigate 和 router.navigateByURL 根本什么都不做。

我检查了以下内容：

  • 我在导航栏中正确导入 RouterModule 和其他 routerLink 工作正常。

  • 我没有尝试将路由器链接到当前活动路径

具有讽刺意味的是，具有下拉属性的 li 上的 routerLink 确实有效。

下拉列表本身显示得很好。选择任何选项都会导致下拉列表消失，但没有任何 routerLink 选项对下拉列表中实际包含的任何内容有任何影响。

这是导航栏标记：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" (click)="isMenuCollapsed = !isMenuCollapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <button type="button" class="navbar-brand" data-toggle="collapse" (click)="isBrandingCollapsed = !isBrandingCollapsed">
            <i *ngIf="isBrandingCollapsed" class="fa fa-chevron-circle-down"></i>
            <i *ngIf="!isBrandingCollapsed" class="fa fa-chevron-circle-up"></i>
        </button>
    </div>
    <div class="collapse navbar-collapse" (collapsed)="collapsed($event)" (expanded)="expanded($event)" [collapse]="isMenuCollapsed">
      <ul class="nav navbar-nav">
        <li *ngIf="userHasPermission()" style="display:inline-block;" routerLink="path1/{{shortName}}" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button" dropdown>
                <i class="fa fa-home fa-lg"></i> {{shortName}}
            </li><a style="display:inline-block;" dropdownToggle>
                <b class="caret"></b>
            </a>
            <ul dropdownMenu class="list-group" role="menu" aria-labelledby="customer-selection">
                <!-- TODO: Figure out why routerLink will not work here and fix it. A full page reload is necessary -->
                <li routerLink="/admin/new" class="btn btn-default" role="button"><i class="glyphicon glyphicon-plus"></i> {{'add'|translate}}</a>
                <li *ngFor="let r of recordList" class="list-group-item">
                    <li class="list-group-item"        (click)="selectRecord(r.shortName)">{{r.shortName}}</li>
            </ul>
        </li>
        <li *ngIf="!userHasPermission()" routerLink="path1/{{shortName}}" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Customer menu label"><i class="fa fa-home fa-lg"></i> {{shortName}}</a></li>
        <li routerLink="path2" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Users menu label"><i class="fa fa-users fa-lg"></i> {{ "path2"|translate }}</a></li>
        <li routerLink="path3" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Questions menu label"><i class="fa fa-book fa-lg"></i> {{ "path3"|translate }}</a></li>
      </ul>
    </div>
  </div>
</nav>

我重新加载整个浏览器的工作正在工作，但是必须做一件可怕的事情来简单地更改正在查看的记录。

4

0 回答 0