У меня есть компонент навигации, который использует 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>
Когда я запускаю приложение, навигация отображается правильно, а «внешняя» ссылка и «функция» -Link (Login ()) работают одним щелчком мыши. Затем я нажимаю, скажем, link2, и ничего не происходит. Когда я нажимаю на него второй раз, он открывает цель ссылки. То же самое поведение для других ссылок «не внешние / не функциональные».
Есть идеи, что вызывает это поведение и как его исправить?
Может понадобиться дополнительная информация:
пакет. 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"
}