Question

我正在使用bootstrap4标签，如果我不在锚标记中提供routerlink，它工作正常，但如果我提供链接，那么只有悬停效果正常。请帮我解决这个问题。

这是我的代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-tabs" id="header-nav">
    <div class="container">
        <div class="col-sm-1">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#" routerLink="/account" id="account">Account</a>
            </li>
        </div>
        <div class="col-sm-1">
            <li class="nav-item" >
                <a class="nav-link" data-toggle="tab" href="#" routerLink="/subscription" id="subscription-header">Subscription</a>
            </li>
        </div>
    </div>
</ul>

谢谢

Answer 1

尝试将其放在文档的底部

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Answer 2

确保您已在模块中导入路由器模块。

import { RouterModule } from '@angular/router';


@NgModule({ imports: [ CommonModule, RouterModule ],

如果我在标记中提供routerlink，则bootstrap 4中的Nav选项卡不起作用

2 个答案: