Question

我有一个导航组件，它使用ng-bootstrap进行带下拉菜单和某些链接的导航：

<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light bg-light container">
  <a class="navbar-brand" href="#"><img width="150 px" src="/assets/images/logo.png"></a>
  <button class="navbar-toggler hidden-sm-up" type="button"  data-target="#navbarsDefault" >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div  class="collapse navbar-collapse" id="navbarsDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" [routerLink]="['/start']" routerLinkActive="router-link-active" >Start <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
          <a class="nav-link" routerLink="/route1" *ngIf='loggedIn'>Link1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/route2" *ngIf='loggedIn && gotRole1'>Link2</a>
        </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="id01"  ngbDropdownToggle *ngIf='loggedIn && gotRole2'>dropDownTitle</a>
        <div class="dropdown-menu" aria-labelledby="id01" ngbDropdownMenu>
          <a  class="dropdown-item" routerLink="/route3" >Link3</a>
          <a  class="dropdown-item" routerLink="/route4" >Link4</a>
          <a  class="dropdown-item" routerLink="/route5" >Link5</a>
         
        </div>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link" href="externalLink" target="_blank" >Link6</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)='login()' *ngIf='!loggedIn'>Login</a>
        <a class="nav-link" (click)='logout()' *ngIf='loggedIn'>Logout</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-effect waves-light">
            {{Username}}
        </a>
      </li>
    
    </ul>
  </div>
</nav>
<hr>
</div>

</header>

当我运行该应用程序时，导航将正确显示，并且一键即可显示“外部”链接和“功能”-链接（Login（））。然后我单击，说link2，什么也没有发生。当我第二次单击它时，它将打开链接目标。其他“非外部/非功能”链接的行为相同。

有什么想法会导致这种现象以及如何解决？

您可能需要更多信息：

package.json：

"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ng-bootstrap/ng-bootstrap": "^5.3.0",
"@types/chart.js": "^2.9.14",
"angular": "^1.7.9",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"jszip": "^3.2.2",
"ngx-filesaver": "^8.1.0",
"ngx-spinner": "^8.1.0",
"oidc-client": "^1.10.1",
"rxjs": "~6.5.3",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"

}

Answer 1

我发现了问题。应用程序路由模块中有一些“警卫队”导致了“两次点击”行为。因此，至少，我有一个解决该问题的新起点。谢谢你的努力。

导航链接需要点击两次才能做出响应

1 个答案: