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

Question

我有一个导航组件，它使用ng引导程序进行导航，带有下拉菜单和一些链接，如下所示：

<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(((只需单击即可工作。然后我点击链接2，什么也没发生。当我第二次点击它时，它将打开链接目标。其他"非外部/非功能"链接的行为相同。

知道是什么导致了这种行为，以及如何修复它吗？

您可能需要更多信息：

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

我发现了问题。应用程序路由模块中有一些Guards导致了"双击"行为。所以，至少，我有了一个新的起点来解决这个问题。谢谢你的努力。