我已经对此主题有另一个疑问> Dropdown in Angular6 with Bootstrap 4.1.3 does not work
我找到了以下解决方案,但是我想知道如何用Angular自己的代码替换那些脚本。
旧解决方案:HTML +将脚本添加到angular-app的index.html
<nav class="navbar navbar-light bg-light mb-5 fixed-top">
<a class="navbar-brand" href="#">Title</a>
<div class="navbar-expand mr-auto">
<div class="navbar-nav">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard">Main Page</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
</ul>
</div>
</div>
<div class="navbar-expand ml-auto">
<div class="navbar-nav">
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
<div class="dropdown-menu">
<a class="dropdown-item" routerLink="/signin">My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" routerLink="/signup">Register</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
,并且在index.html
中添加了这些脚本。
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>